CODEWITHSUNDEEP
htmlcssmedia-queriesflexbox
Agni Scribe
Agni Scribe

Reputation: 252

Display:none items still retaining space on the page

I have six items in a 100%-width carousel. When the screen is in portrait orientation, I'd like only 3 items to appear, so i dropped 3 using a media query (here is the jfiddle with the complete script):

 @media all and (orientation:portrait) {

    .wrapper4 .carousel1{
        display: none;
    }

    .wrapper4 .carousel3{
        display: none;
    }

    .wrapper4 .carousel6{
        display: none;
    }
}

The 3 items disappear, but the space they occupy is still retained. And when I try to get the remaining items to fill out the space that was previously occupied, it doesn't work.

.wrapper4 .carousel {
    flex: 1; min-width: 33.3333%;
}

ie. above doesn't help spread out the remaining items. The 3 remaining items in the carousel retain their size and there's blank space occupied by the previous items when the screen is contracted to mimic portrait mode. How can I get the space to be freed up and the remaining items to fill up this space?

Upvotes: 0

Views: 427

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371699

Tested on Chrome in Samsung Note, this works as intended:

All carousel items disappear in portrait mode:

@media all and ( orientation: portrait ) {

    .carousel1 { display: none; }
    .carousel2 { display: none; }
    .carousel3 { display: none; }
    .carousel4 { display: none; }
    .carousel5 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/11/ (can also be tested on desktop by re-sizing window)

All carousel items disappear in landscape mode:

@media all and ( orientation: landscape ) {

    .carousel1 { display: none; }
    .carousel2 { display: none; }
    .carousel3 { display: none; }
    .carousel4 { display: none; }
    .carousel5 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/12/

Removing the three carousel items as described in the question:

@media all and ( orientation: portrait ) {

    .carousel1 { display: none; }
    .carousel3 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/13/

The only adjustments made were to match the alt tags in the img element with the corresponding carousel ID number, and I simplified the selector.

Upvotes: 1

Related Questions