CODEWITHSUNDEEP
cssmedia-queriesresponsive
Toniq
Toniq

Reputation: 5016

Css media queries percent width

I have following markup (simplified for demostration)

https://jsfiddle.net/n07znakb/3/

<div id="wrapper">
  <div class="playlist-inner">
    <div class="playlist-content">

      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>

    </div>
  </div>
</div>

playlist-content is the width of 1000px (which is playlist-item number x playlist-item width), I set this in javascript.

If there were 10 playlist-items then the width would be 2000px for example.

I want to achieve the following:

wrapper max width is 600px, 3 playlist-items are visible (this works) when the wrapper width is between 600 and 400px, I want playlist items to be 33.3% width of the playlist-inner (which is the second upper parent!), so 3 playlist items visible. when the wrapper width is below 400px width, I want playlist items to be 50% width of the playlist-inner (which is the second upper parent!), so 2 playlist items visible.

I know I can do this with javascript. I wonder if I can do it with css alone?

With current css it doesnt work because setting 33.3% width takes parent width which is playlist-content, but I want it to be 33.3% width of one more upper parent which is playlist-inner.

Hopefully someone will understand.

Upvotes: 0

Views: 4628

Answers (1)

Medda86
Medda86

Reputation: 1630

You should code from mobile and up. And set the wrapper to be relative.

So from 0px to be drastic, you want the playlist items to be 100%;

.playlist-item{width:100%;}

from 400 and up, you want 50%;

@media screen and (min-width: 400px) {
   .playlist-item{width:50%;}
}

from 600 and up, you want 33.3%;

@media screen and (min-width: 600px) {
   .playlist-item{width:33.3%;}
}

I made a ul list for example here: https://jsfiddle.net/n07znakb/4/

Upvotes: 1

Related Questions