0

I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/‎) combined with elements of HTML5 boilerplate to help get me started.

Here's what I've got at the moment: http://pftest.comyr.com/grid/

One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.

After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: @media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)

The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (@media (max-width: 22em), @media (max-width: 320px) ect.

I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.

The CSS in question is:

@media (max-width: 22em) {
#workgrid {

    width: 100%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}
}

Which is applied to each of the DIV "col-1-3" classes.

As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)

Amir
  • 1,328
  • 2
  • 13
  • 27
FuManchuNZ
  • 185
  • 2
  • 16
  • Use the same id (`#workgrid`) in more than one HTML tag is a [bad practice](http://stackoverflow.com/a/13074870/2968891) – Alex Guerrero Nov 12 '13 at 10:39
  • Ah right, I should have known that.... So could I get some tips on what the best way to apply specific stylings to the columns would be? and how to solve the single column issue? – FuManchuNZ Nov 12 '13 at 11:07

1 Answers1

0

The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.

For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.

Here are two links that maybe help you to understand fluid elements better:

To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.

Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:

@media (max-width: 22em) {

to this:

@media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that

Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.

Alex Guerrero
  • 2,109
  • 1
  • 19
  • 28
  • Well, I tried adding max-width and max-height to those classes but now it's even more broken, still not collapsing into a single column and I'm more confused than ever. – FuManchuNZ Nov 12 '13 at 19:47
  • lol... well _that_ worked (changing it to max-width: 41em). Any chance I could get a brief explanation why that works so I can understand what's going on a little better? Thanks - quickest solution isn't always the best I understand but I have to admit I have already delayed this project long enough and would love to get it completed soon so that is a great help. :) I need to take some more time to look over those recommended articles too as I am certainly still struggling to understand exactly how the max-width and min-width properties work... – FuManchuNZ Nov 12 '13 at 22:25
  • Also, I changed #workgrid back to [class*='col-'] {} which I originally had it as for proper semantics. For some reason I thought I would want it to be applied only to those particular 1-3 row grid columns instead of all 1-3 row grid columns in the layout.... but that obviously wouldn't make any sense now that I think about it. :D – FuManchuNZ Nov 12 '13 at 22:33
  • er, scratch that, I mean I changed it back to .col-1-3 to target only those columns since [class*='col-'] {} would affect every column in the layout - which I wouldn't necessarily want... right? ugh I'm confused again... – FuManchuNZ Nov 13 '13 at 02:32
  • Use `.workgrid` instead of `[class*='col-']` or `.col-1-3`, is more specific and in CSS, [specificity in selectors means performance](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) – Alex Guerrero Nov 13 '13 at 15:33
  • Great, thanks for the explanation. Sounds like I need to be more specific with the media queries I use to adapt to my own layout instead of just using recommended "general media queries" definitions I've found around the web. – FuManchuNZ Nov 13 '13 at 19:46