CODEWITHSUNDEEP
htmlcssflexbox
Mark Denom
Mark Denom

Reputation: 1057

Why isnt my flex wrap actually stacking my items on top of each other?

So I am trying to make my design more responsive. To begin with this is what it looks like

[![enter image description here][1]][1]

And when I shrink the browser down to 180px I want all the small icons to stack on top of each other but instead it looks like it hides some like this

[![enter image description here][2]][2] See how some icons are missing? Also the icons won't even show up on firefox.

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: 
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;

    }

    .bottomItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;

    }
}
<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

Upvotes: 1

Views: 40

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Set only height: auto; to topItems, middleItems, bottomItems in below 180px media query

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }

    .bottomItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }
}
<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

Upvotes: 1

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

remove below css properties in your media query:

display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

same i have updated in code snippet. hope this will help:)

html {
  background: #212121;
}

.wrapper {
  margin-top: 15%;
  display: flex;
  justify-content: center;
  /*center the element*/
  flex-wrap: wrap;
  /*make them above each other when they cannot fit in one row*/
}

.divWrapper {
  background-image: url("/images/gear.png");
  height: 600px;
  width: 250px;
  margin: 5%;
}

.headSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}

.neckSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.arrowSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.capeSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.chestSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.swordSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.shieldSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.legSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.feetSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.gloveSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
  width: 45px;
  height: 45px;
}

.ringSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
  width: 45px;
  height: 45px;
}

.topItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.middleItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottomItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media only screen and (max-width: 180px) {
      .topItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;
}

.middleItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;

}

.bottomItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;

}
}
<div class="wrapper">
  <div class="divWrapper">
    <a href="#">
      <section class="headSlot">
      </section>
    </a>


    <div class="topItems">
      <a href="#">
        <section class="capeSlot">
        </section>
      </a>
      <a href="#">
        <section class="neckSlot">
        </section>
      </a>
      <a href="#">
        <section class="arrowSlot">
        </section>
      </a>
    </div>

    <div class="middleItems">
      <a href="#">
        <section class="swordSlot">
        </section>
      </a>
      <a href="#">
        <section class="chestSlot">
        </section>
      </a>
      <a href="#">
        <section class="shieldSlot">
        </section>
      </a>

    </div>


    <a href="#">
      <section class="legSlot">
      </section>
    </a>

    <div class="bottomItems">
      <a href="#">
        <section class="gloveSlot">
        </section>
      </a>
      <a href="#">
        <section class="feetSlot">
        </section>
      </a>
      <a href="#">
        <section class="ringSlot">
        </section>
      </a>
    </div>
  </div>

  <div class="divWrapper">

  </div>
</div>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Upvotes: 0

Related Questions