0

I'm writing code for a new website. But I'm trying to fix a problem with one part of the webpage. The problem happens with text.

Everything is fine other than this div - "statementtext-text-form-pgmiddle".

The text always gets pushed up and then to the right. I need the text to be aligned in the center just like the rest of the webpage. The text is ok only when the size of the window is very small. I was digging into the CSS code and can't find out why it happens. I've tried playing with padding and margin but without any results.

I know I could give you only the part of the code with that element but as I don't know where the issue is I can't really clear it.

@font-face {
  font-family: 'familiar_probold';
  src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'), url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'uni_sansheavy_caps';
  src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'), url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'source_sans_problack';
  src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'), url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: url("images/background.jpg");
  background-size: cover;
  font-family: sans-serif;
}

img {
  width: 100%;
  height: auto;
}

.navbar {
  width: 100%;
  background-color: #000;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
}

._Logo {
  overflow: hidden;
  text-align: center;
  flex-basis: 230px;
}

._Logo img {
  height: 100% !important;
  width: 150px !important;
}

._Menus ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

._Menus ul li a {
  display: block;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #FFF;
  outline: none;
  font-family: 'uni_sansheavy_caps';
}

._Menus ul li a:hover {
  background-color: #FFF;
  color: #000;
}

._Iconbar {
  display: none;
  background-color: #000;
}

.menu-bar {
  width: 45px;
  align-self: center;
  cursor: pointer;
}

.icon-bar {
  height: 3px;
  width: 100%;
  background: #FFF;
  margin: 7px 0;
  display: block;
  border-radius: 2px;
}

.image-background-cover-pgtop {
  background-image: url("images/awpasiimov.jpeg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container-element-unified-pgtop .container-text-informationwebsite-pgtop {
  position: relative;
  padding-top: 10%;
  padding-left: 10%;
  padding-bottom: 1%;
  font-family: 'familiar_probold';
  font-size: 200%;
  color: grey;
}

.container-element-unified-pgtop .container-text-informationlow-pgtop {
  position: relative;
  padding-left: 10%;
  font-family: 'uni_sansheavy_caps';
  font-size: 500%;
  color: white;
}

.container-element-unified-pgtop .container-text-informationtime-pgtop {
  position: relative;
  padding-left: 10%;
  font-family: 'uni_sansheavy_caps';
  font-size: 500%;
  color: #82359C;
  /* border-bottom: 6px solid #DCC98E;*/
  padding-bottom: 1%;
}

.container-line-form-pgtop {
  background: #82359C;
  height: 6px;
  border: none;
  width: 45%;
  margin-left: 10%;
  position: relative;
}

.container-element-unified-pgtop-2 {
  padding-top: 1%;
}

.container-element-unified-pgtop-2 .container-text-informationhow-pgtop a {
  position: relative;
  padding-left: 10%;
  font-family: familiar_probold;
  font-size: 200%;
  color: #ffccff;
  /*border-bottom: 3px solid #B9CDBE;*/
  padding-bottom: 3px;
  text-decoration: none;
}

.container-element-unified-pgtop-2 .container-text-informationcheck-pgtop {
  position: relative;
  padding-top: 2%;
  padding-left: 10%;
  font-family: 'Arial';
  font-size: 200%;
  color: white;
  padding-bottom: 10%;
}

.container-form-line {
  background: #82359C;
  height: 8px;
  border: none;
}

.icons-image-form-pgmiddle {
  padding-top: 2%;
  vertical-align: center;
  text-align: center;
}

.wideicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.safetyicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.freeicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.container-element-unified-pgmiddle {
  padding-top: 2%;
  padding-bottom: 2%;
  vertical-align: center;
  text-align: center;
}

.container-element-unified-pgmiddle .widetext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-size: 150%;
  font-family: familiar_probold;
  color: #1B1C1E;
}

.widetext-text-form-pgmiddle br {
  font-family: Arial;
}

.safetytext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-family: familiar_probold;
  font-size: 150%;
  color: #1B1C1E;
}

.safetytext-text-form-pgmiddle br {
  font-family: Arial;
}

.freetext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-family: familiar_probold;
  font-size: 150%;
  color: #1B1C1E;
}

.tutorialtext-text-form-pgmiddle {
  padding-top: 3%;
  padding-bottom: 3%;
  text-align: center;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 350%;
  width: 100%;
}

.tutorialtext-text-form-pgmiddle p {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-family: 'Arial';
  color: grey;
  font-size: 50%;
  width: 100%;
}

.circles {
  margin: 0 auto;
}

.circles>div {
  overflow: hidden;
  float: left;
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.circles>div>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: 'uni_sansheavy_caps';
  font-size: 300%;
  color: grey;
}

.circles>div>div>div {
  display: table;
  width: 100%;
  height: 100%;
}

.circles>div>div>div>div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 320px) {
  .circles>div {
    padding: 50%;
  }
}

@media (min-width: 321px) and (max-width: 800px) {
  .circles>div {
    padding: 25%;
  }
}

@media (min-width: 801px) {
  .circles {
    width: 800px
  }
  .circles>div {
    padding: 12.5%;
  }
}

.circlescontent {
  margin: 0 auto;
}

.circlescontent>div {
  overflow: hidden;
  float: left;
  width: auto;
  height: auto;
  position: relative;
}

.circlescontent>div>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: familiar_probold;
  font-size: 200%;
  color: grey;
}

.circlescontent>div>div>div {
  display: table;
  width: 100%;
  height: 100%;
}

.circlescontent>div>div>div>div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 320px) {
  .circlescontent>div {
    padding: 50%;
  }
}

@media (min-width: 321px) and (max-width: 800px) {
  .circlescontent>div {
    padding: 25%;
  }
}

@media (min-width: 801px) {
  .circlescontent {
    width: 800px
  }
  .circlescontent>div {
    padding: 12.5%;
  }
}

.container-form-pgmiddle {
  padding-top: 4%;
  padding-bottom: 4%;
}

.statementtext-text-form-pgmiddle {
  text-align: center;
  left: 50%;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 390%;
  width: 100%;
}

.statementtext-text-form-pgmiddle p {
  padding-top: 20px;
  padding-bottom: 0;
  text-align: center;
  left: 50%;
  font-family: familiar_probold;
  color: white;
  font-size: 50%;
  width: 100%;
  color: grey;
}

.statementtextdescription-text-form-pgmiddle {
  padding-top: 4%;
  padding-bottom: 4%;
  text-align: center;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 350%;
}

.buttonbkg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20vh;
  padding-bottom: 4%;
}

.button {
  width: 320px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  transform: translatez(0);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 130%;
  font-weight: normal;
  font-family: familiar_probold;
  color: white;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin: 3%;
  align-content: center;
}

.steam {
  text-align: center;
  border-radius: 50px;
  padding: 26px;
  color: white;
  background: #BD3381;
  transition: all 0.2s ease-out 0s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: auto;
  margin: auto;
  z-index: -1;
  background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .8) 30%, rgba(255, 255, 255, 0));
  transition: all 0s ease-out 0s;
  transform: translatex(-140px);
  animation: 18s linear 0s infinite move;
  display: inline-block;
  align-content: center;
}

.container-form-pgend {
  background-color: #1B1C1E;
  padding-top: 1.125%;
  padding-bottom: 1.125%;
  position: relative;
}

.text-form-pgend-rights {
  color: white;
  margin-left: 1.5%;
  font-family: familiar_probold;
  font-size: 107.5%;
  position: relative;
}

@keyframes move {
  0% {
    transform: translatex(-140px);
  }
  25% {
    transform: translatex(140px);
    opacity: 0.3;
  }
  50% {
    transform: translatex(140px);
    opacity: 1;
    background: radial-gradient(90px circle at bottom center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
  }
  75% {
    transform: translatex(-140px);
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translatex(-140px);
    background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
  }
}

@media (max-width: 900px) {
  ._Logo {
    height: 60px;
  }
  ._Menus {
    flex: 100%;
    background: #333;
    height: 0;
    overflow: hidden;
  }
  ._Menus ul {
    flex-direction: column;
  }
  ._Menus ul li a {
    height: 40px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 40px;
  }
  ._Menus ul li a:hover {
    background-color: #81d742;
    color: #FFF;
  }
  .container {
    justify-content: space-between;
  }
  ._Iconbar {
    display: flex;
    margin-right: 10px;
  }
  ._Menus-show {
    height: auto;
  }
  .brandimage {
    display: none;
  }
  @media (max-width: 600px) {
    ._Logo {
      height: 60px;
    }
    ._Menus {
      flex: 100%;
      background: #333;
      height: 0;
      overflow: hidden;
    }
    ._Menus ul {
      flex-direction: column;
    }
    ._Menus ul li a {
      height: 40px;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 40px;
    }
    ._Menus ul li a:hover {
      background-color: #81d742;
      color: #FFF;
    }
    .container {
      justify-content: space-between;
    }
    ._Iconbar {
      display: flex;
      margin-right: 10px;
    }
    ._Menus-show {
      height: auto;
    }
    .brandimage {
      display: none;
    }
  }
}
<nav class="navbar">
    <div class="container">
        <section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
        <section class="_Iconbar">
            <span class="menu-bar" onclick="showHide()">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </span>
        </section>
        <section class="_Menus" id="nav-lists">
            <ul>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="howitworks.html">HOW IT WORKS</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">AVAILABLE SKINS</a></li>
                <li><a href="#">SIGN IN THROUGH STEAM</a></li>
            </ul>
        </section>
    </div>
</nav>
<div class="image-background-cover-pgtop">
    <div class="container-element-unified-pgtop">
        <div class="container-text-informationwebsite-pgtop">WEBSITE WITH TRULY FREE SKINS</div>
        <div class="container-text-informationlow-pgtop">LOW ON SKINS?</div>
        <div class="container-text-informationtime-pgtop">TIME TO GET NEW FREE!</div>
        <div class="container-line-form-pgtop"></div>
    </div>
    <div class="container-element-unified-pgtop-2">
        <div class="container-text-informationhow-pgtop"><a href="#">HOW IS THIS WORKING?</a></div>
        <div class="container-text-informationcheck-pgtop">check how it works page or visit our YouTube</div>
    </div>
</div>
<div class="container-form-line"></div>
<div class="icons-image-form-pgmiddle">
    <img class="wideicon-image-form-pgmiddle" src="images/searchicon.svg" alt="Easy Search">
    <img class="safetyicon-image-form-pgmiddle" src="images/simpleicon.svg" alt="Super Simple">
    <img class="freeicon-image-form-pgmiddle" src="images/rewards.svg" alt="Easy Rewards">
</div>

<div class="container-element-unified-pgmiddle">
    <div class="widetext-text-form-pgmiddle">WIDE
        <p>SKINS SUPPLY</p>
    </div>
    <div class="safetytext-text-form-pgmiddle">SAFETY<br>GUARANTEED</div>
    <div class="freetext-text-form-pgmiddle">FREE<br>USER REWARDS</div>
</div>

<div class="tutorialtext-text-form-pgmiddle">HOW CAN I DO IT?
    <p>If you want your new skins complete the four easy steps.</p>
</div>

<div class="circles">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    1.
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

<div class="circles">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    2.
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

<div class="circles">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    3.
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

<div class="circles">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    4.
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    SIGN IN WITH STEAM
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    DO THE REFERR PROCESS
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    CHOOSE WANTED SKINS
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
    <div>
        <div>
            <div>
                <div>
                    <!-- BEG Content -->
                    GET YOUR SKINS
                    <!-- END Content -->
                </div>
            </div>
        </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

<div class="container-form-pgmiddle"></div>

<div class="statementtext-text-form-pgmiddle">EASY AS THAT
    <p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p>
</div>
<div class="statementtextdescription-text-form-pgmiddle">WE SAID NO TO CATCHES!</div>
<div class="buttonbkg">
    <a href="#" class="button steam"><span class="gradient"></span>SIGN IN WITH STEAM</a>
    <a href="#" class="button steam"><span class="gradient"></span>AVAILABLE SKINS</a>
    <a href="#" class="button steam"><span class="gradient"></span>HOW IT WORKS</a>
</div>
<div class="container-form-line"></div>
<div class="container-form-pgend">
    <div class="text-form-pgend-rights">©2018-2019 “REFF SKINS” ALL RIGHTS RESERVED. FREE SKINS SERVICE.</div>
</div>
Anshu
  • 1,277
  • 2
  • 13
  • 28
  • 2
    please post only the neseccary code, not everything – xmaster Jun 18 '19 at 13:52
  • Ok, I will pay more attention to it next time. –  Jun 18 '19 at 13:55
  • 1
    You need to **clear your floats**. It's causing a few issues on the page. Any time you have a floated element or multiple floated elements beside eachother, *the final sibling needs to be an empty block element with `clear: both;` applied*. You can also achieve this using a pseudo-element on the parent: `.circlescontent::after { display: block; content: ''; clear: both; }` – Tyler Roper Jun 18 '19 at 13:59
  • 1
    Did you have a look at the tools that Firefox or Chrome have for this? If you press f12 you can go to the inspector (at least that's what it's called in firefox). At the left you can select your code and on the right you can see the bounding boxes with margin/padding/border for them. – Maxim VA Jun 18 '19 at 14:00
  • I did the inspection with developer tools. –  Jun 18 '19 at 14:01
  • @TH3R34LS3V3NF1V3S1XN1N3 The CSS I included in my previous comment will fix your issue. However, it may open up some other issues. I imagine the cause is the same - you may just need to apply this in a few places. Better yet, consider using `flex` instead of `float` :) – Tyler Roper Jun 18 '19 at 14:01
  • Yeah, I used your advice and worked well, looks like no other issues applied. Thanks a lot, you can add it as an answer so the question can be marked as solved. I will consider using more flex instead of floats thanks. –  Jun 18 '19 at 14:04

2 Answers2

0

The issue is with the floated div inside each .circles and .cirlcescontent elements. They are being floated but they are not being cleared afterwards, so the rest of the document flow is breaking.

I have just added a wrapper around each group of .cirlces and .circlescontent and applied a :after pseudo element with clear:both;.

@font-face {
  font-family: 'familiar_probold';
  src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'), url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'uni_sansheavy_caps';
  src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'), url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'source_sans_problack';
  src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'), url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
   
/* ####### ADDED CSS START ####### */
.clearme:after {
  content:"";
  display:table;
  clear:both;
}
/* ####### ADDED CSS END ####### */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: url("images/background.jpg");
  background-size: cover;
  font-family: sans-serif;
}

img {
  width: 100%;
  height: auto;
}

.navbar {
  width: 100%;
  background-color: #000;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
}

._Logo {
  overflow: hidden;
  text-align: center;
  flex-basis: 230px;
}

._Logo img {
  height: 100% !important;
  width: 150px !important;
}

._Menus ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

._Menus ul li a {
  display: block;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #FFF;
  outline: none;
  font-family: 'uni_sansheavy_caps';
}

._Menus ul li a:hover {
  background-color: #FFF;
  color: #000;
}

._Iconbar {
  display: none;
  background-color: #000;
}

.menu-bar {
  width: 45px;
  align-self: center;
  cursor: pointer;
}

.icon-bar {
  height: 3px;
  width: 100%;
  background: #FFF;
  margin: 7px 0;
  display: block;
  border-radius: 2px;
}

.image-background-cover-pgtop {
  background-image: url("images/awpasiimov.jpeg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container-element-unified-pgtop .container-text-informationwebsite-pgtop {
  position: relative;
  padding-top: 10%;
  padding-left: 10%;
  padding-bottom: 1%;
  font-family: 'familiar_probold';
  font-size: 200%;
  color: grey;
}

.container-element-unified-pgtop .container-text-informationlow-pgtop {
  position: relative;
  padding-left: 10%;
  font-family: 'uni_sansheavy_caps';
  font-size: 500%;
  color: white;
}

.container-element-unified-pgtop .container-text-informationtime-pgtop {
  position: relative;
  padding-left: 10%;
  font-family: 'uni_sansheavy_caps';
  font-size: 500%;
  color: #82359C;
  /* border-bottom: 6px solid #DCC98E;*/
  padding-bottom: 1%;
}

.container-line-form-pgtop {
  background: #82359C;
  height: 6px;
  border: none;
  width: 45%;
  margin-left: 10%;
  position: relative;
}

.container-element-unified-pgtop-2 {
  padding-top: 1%;
}

.container-element-unified-pgtop-2 .container-text-informationhow-pgtop a {
  position: relative;
  padding-left: 10%;
  font-family: familiar_probold;
  font-size: 200%;
  color: #ffccff;
  /*border-bottom: 3px solid #B9CDBE;*/
  padding-bottom: 3px;
  text-decoration: none;
}

.container-element-unified-pgtop-2 .container-text-informationcheck-pgtop {
  position: relative;
  padding-top: 2%;
  padding-left: 10%;
  font-family: 'Arial';
  font-size: 200%;
  color: white;
  padding-bottom: 10%;
}

.container-form-line {
  background: #82359C;
  height: 8px;
  border: none;
}

.icons-image-form-pgmiddle {
  padding-top: 2%;
  vertical-align: center;
  text-align: center;
}

.wideicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.safetyicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.freeicon-image-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}

.container-element-unified-pgmiddle {
  padding-top: 2%;
  padding-bottom: 2%;
  vertical-align: center;
  text-align: center;
}

.container-element-unified-pgmiddle .widetext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-size: 150%;
  font-family: familiar_probold;
  color: #1B1C1E;
}

.widetext-text-form-pgmiddle br {
  font-family: Arial;
}

.safetytext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-family: familiar_probold;
  font-size: 150%;
  color: #1B1C1E;
}

.safetytext-text-form-pgmiddle br {
  font-family: Arial;
}

.freetext-text-form-pgmiddle {
  width: 15%;
  height: auto;
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
  font-family: familiar_probold;
  font-size: 150%;
  color: #1B1C1E;
}

.tutorialtext-text-form-pgmiddle {
  padding-top: 3%;
  padding-bottom: 3%;
  text-align: center;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 350%;
  width: 100%;
}

.tutorialtext-text-form-pgmiddle p {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-family: 'Arial';
  color: grey;
  font-size: 50%;
  width: 100%;
}

.circles {
  margin: 0 auto;
}

.circles>div {
  overflow: hidden;
  float: left;
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.circles>div>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: 'uni_sansheavy_caps';
  font-size: 300%;
  color: grey;
}

.circles>div>div>div {
  display: table;
  width: 100%;
  height: 100%;
}

.circles>div>div>div>div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 320px) {
  .circles>div {
    padding: 50%;
  }
}

@media (min-width: 321px) and (max-width: 800px) {
  .circles>div {
    padding: 25%;
  }
}

@media (min-width: 801px) {
  .circles {
    width: 800px
  }
  .circles>div {
    padding: 12.5%;
  }
}

.circlescontent {
  margin: 0 auto;
}

.circlescontent>div {
  overflow: hidden;
  float: left;
  width: auto;
  height: auto;
  position: relative;
}

.circlescontent>div>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: familiar_probold;
  font-size: 200%;
  color: grey;
}

.circlescontent>div>div>div {
  display: table;
  width: 100%;
  height: 100%;
}

.circlescontent>div>div>div>div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 320px) {
  .circlescontent>div {
    padding: 50%;
  }
}

@media (min-width: 321px) and (max-width: 800px) {
  .circlescontent>div {
    padding: 25%;
  }
}

@media (min-width: 801px) {
  .circlescontent {
    width: 800px
  }
  .circlescontent>div {
    padding: 12.5%;
  }
}

.container-form-pgmiddle {
  padding-top: 4%;
  padding-bottom: 4%;
}

.statementtext-text-form-pgmiddle {
  text-align: center;
  left: 50%;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 390%;
  width: 100%;
}

.statementtext-text-form-pgmiddle p {
  padding-top: 20px;
  padding-bottom: 0;
  text-align: center;
  left: 50%;
  font-family: familiar_probold;
  color: white;
  font-size: 50%;
  width: 100%;
  color: grey;
}

.statementtextdescription-text-form-pgmiddle {
  padding-top: 4%;
  padding-bottom: 4%;
  text-align: center;
  font-family: 'uni_sansheavy_caps';
  color: #1B1C1E;
  font-size: 350%;
}

.buttonbkg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20vh;
  padding-bottom: 4%;
}

.button {
  width: 320px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  transform: translatez(0);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 130%;
  font-weight: normal;
  font-family: familiar_probold;
  color: white;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin: 3%;
  align-content: center;
}

.steam {
  text-align: center;
  border-radius: 50px;
  padding: 26px;
  color: white;
  background: #BD3381;
  transition: all 0.2s ease-out 0s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: auto;
  margin: auto;
  z-index: -1;
  background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .8) 30%, rgba(255, 255, 255, 0));
  transition: all 0s ease-out 0s;
  transform: translatex(-140px);
  animation: 18s linear 0s infinite move;
  display: inline-block;
  align-content: center;
}

.container-form-pgend {
  background-color: #1B1C1E;
  padding-top: 1.125%;
  padding-bottom: 1.125%;
  position: relative;
}

.text-form-pgend-rights {
  color: white;
  margin-left: 1.5%;
  font-family: familiar_probold;
  font-size: 107.5%;
  position: relative;
}

@keyframes move {
  0% {
    transform: translatex(-140px);
  }
  25% {
    transform: translatex(140px);
    opacity: 0.3;
  }
  50% {
    transform: translatex(140px);
    opacity: 1;
    background: radial-gradient(90px circle at bottom center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
  }
  75% {
    transform: translatex(-140px);
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translatex(-140px);
    background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
  }
}

@media (max-width: 900px) {
  ._Logo {
    height: 60px;
  }
  ._Menus {
    flex: 100%;
    background: #333;
    height: 0;
    overflow: hidden;
  }
  ._Menus ul {
    flex-direction: column;
  }
  ._Menus ul li a {
    height: 40px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 40px;
  }
  ._Menus ul li a:hover {
    background-color: #81d742;
    color: #FFF;
  }
  .container {
    justify-content: space-between;
  }
  ._Iconbar {
    display: flex;
    margin-right: 10px;
  }
  ._Menus-show {
    height: auto;
  }
  .brandimage {
    display: none;
  }
  @media (max-width: 600px) {
    ._Logo {
      height: 60px;
    }
    ._Menus {
      flex: 100%;
      background: #333;
      height: 0;
      overflow: hidden;
    }
    ._Menus ul {
      flex-direction: column;
    }
    ._Menus ul li a {
      height: 40px;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 40px;
    }
    ._Menus ul li a:hover {
      background-color: #81d742;
      color: #FFF;
    }
    .container {
      justify-content: space-between;
    }
    ._Iconbar {
      display: flex;
      margin-right: 10px;
    }
    ._Menus-show {
      height: auto;
    }
    .brandimage {
      display: none;
    }
  }
}
<nav class="navbar">
    <div class="container">
        <section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
        <section class="_Iconbar">
            <span class="menu-bar" onclick="showHide()">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </span>
        </section>
        <section class="_Menus" id="nav-lists">
            <ul>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="howitworks.html">HOW IT WORKS</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">AVAILABLE SKINS</a></li>
                <li><a href="#">SIGN IN THROUGH STEAM</a></li>
            </ul>
        </section>
    </div>
</nav>
<div class="image-background-cover-pgtop">
    <div class="container-element-unified-pgtop">
        <div class="container-text-informationwebsite-pgtop">WEBSITE WITH TRULY FREE SKINS</div>
        <div class="container-text-informationlow-pgtop">LOW ON SKINS?</div>
        <div class="container-text-informationtime-pgtop">TIME TO GET NEW FREE!</div>
        <div class="container-line-form-pgtop"></div>
    </div>
    <div class="container-element-unified-pgtop-2">
        <div class="container-text-informationhow-pgtop"><a href="#">HOW IS THIS WORKING?</a></div>
        <div class="container-text-informationcheck-pgtop">check how it works page or visit our YouTube</div>
    </div>
</div>
<div class="container-form-line"></div>
<div class="icons-image-form-pgmiddle">
    <img class="wideicon-image-form-pgmiddle" src="images/searchicon.svg" alt="Easy Search">
    <img class="safetyicon-image-form-pgmiddle" src="images/simpleicon.svg" alt="Super Simple">
    <img class="freeicon-image-form-pgmiddle" src="images/rewards.svg" alt="Easy Rewards">
</div>

<div class="container-element-unified-pgmiddle">
    <div class="widetext-text-form-pgmiddle">WIDE
        <p>SKINS SUPPLY</p>
    </div>
    <div class="safetytext-text-form-pgmiddle">SAFETY<br>GUARANTEED</div>
    <div class="freetext-text-form-pgmiddle">FREE<br>USER REWARDS</div>
</div>

<div class="tutorialtext-text-form-pgmiddle">HOW CAN I DO IT?
    <p>If you want your new skins complete the four easy steps.</p>
</div>
<!-- Added wrapper START -->
<div class="clearme">
  <div class="circles">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      1.
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>

  <div class="circles">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      2.
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>

  <div class="circles">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      3.
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>

  <div class="circles">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      4.
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>
</div>
<!-- Added wrapper END -->
<!-- Added wrapper START -->
<div class="clearme">
  <div class="circlescontent">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      SIGN IN WITH STEAM
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>
  <div class="circlescontent">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      DO THE REFERR PROCESS
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>
  <div class="circlescontent">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      CHOOSE WANTED SKINS
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>
  <div class="circlescontent">
      <div>
          <div>
              <div>
                  <div>
                      <!-- BEG Content -->
                      GET YOUR SKINS
                      <!-- END Content -->
                  </div>
              </div>
          </div>
      </div>
      <!-- ditto the above 3 more times -->
  </div>
</div>
<!-- Added wrapper END -->

<div class="container-form-pgmiddle"></div>

<div class="statementtext-text-form-pgmiddle">EASY AS THAT
    <p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p>
</div>
<div class="statementtextdescription-text-form-pgmiddle">WE SAID NO TO CATCHES!</div>
<div class="buttonbkg">
    <a href="#" class="button steam"><span class="gradient"></span>SIGN IN WITH STEAM</a>
    <a href="#" class="button steam"><span class="gradient"></span>AVAILABLE SKINS</a>
    <a href="#" class="button steam"><span class="gradient"></span>HOW IT WORKS</a>
</div>
<div class="container-form-line"></div>
<div class="container-form-pgend">
    <div class="text-form-pgend-rights">©2018-2019 “REFF SKINS” ALL RIGHTS RESERVED. FREE SKINS SERVICE.</div>
</div>
WizardCoder
  • 3,353
  • 9
  • 20
0

The text is ok only when the size of the window is very small

As I understand this works fine for resolution less than 800px (of page width). You use the size of .circles in pixels for '@media' here:

@media (min-width: 801px) {
  .circlescontent {
    width: 100px;
  }
}

Twice. The percent usage also corrected your issue:

@media (min-width: 801px) {
  .circlescontent {
    width: 100%;
  }
}

Look lines #347 and #403 in your CSS file.

Valeriy Garbuzov
  • 46
  • 2
  • 6