Responsive Two Column / Multi Row Grid

[zoelise]

Hey!

I’m a pleb and trying to figure this out.

I’ve gotten this far with the coding and I’m trying to make it more mobile friendly and scale to one column when it hits a certain width, but I can’t figure that part out. hhh

Help, advise, a way to make this less code-y, anything would be greatly appreciated! Thanks!

http://codepen.io/zoelise/pen/dOyqYp

P.S. I do not know how to use JavaScript. I realize that would help SOO much, but just CSS/HTML would be best for my abilities as of right now.

[Alex Zaworski]

Looks like this is what you wanted instead of your current @media query:

@media only screen and (max-width: 750px) {
  .items .item {
    width: 100%;
  }
}

[zoelise]

That seems to have done it.
Thanks!

[jurotek]

You might consider mobile first:

.items .item {width: 100%;}

@media (min-width: 760px){
  .items .item{width: 50%;}
}

[Author]

Posts