2

I'm writing a responsive wordpress site. I'm using the bones theme template. The grid system included worked pretty well on most of the site, but I found I needed differing number of columns on different screen sizes for a particular page.

To do this, I used a bit of scss that looks like this:

 (base media query)
 section{
        display:table;
        float:left;
        margin-left:0;
        width:100%;
 }

 (media query for 768 px and above)
 section{
        height:150px;
        width:48.618784527%;
        &:nth-child(3n+1), &:nth-child(2n){
                 margin-left:2.76243%;
        }
        &:nth-child(2n+1){ 
             margin-left:0;
        }
        text-align:right;
 }
 (media query for 1030px and above)
.pracareas{
        section{
                width:31.491712705%;

                &:nth-child(2n+1){
                        margin-left:2.76243%;
                }
                &:nth-child(3n+1){
                        margin-left:0;
                }
        }
 }

And HTML like this

<div class="pracareas">
     <section>... content</section>
     <section>... content</section>
     <section>... content</section>
     <section>... content</section>
</div>

This works great on desktop browser and Android. But on safari I get something like this:

safari problem

What's really strange is that if I refresh and/or rotate the ipad to portrait or vice versa, I get this:

safari fixed

But if I click on a link leading to this page or visit it directly (typing into the url bar), the layout is messed up until I refresh or rotate.

I'm probably going to abandon this approach and go for fixed number of columns above mobile because this seems really messy. But I thought I'd ask since it is only not working on a single browser.

Stephen Panzer
  • 289
  • 5
  • 16

1 Answers1

1

That's because not all browsers render decimal values of width in percentages the same way.

Another approach could be to set breakpoints with media queries in order to target different devices.

Also try to round a bit those values and see if you manage to get an acceptable result.

See this: Are the decimal places in a CSS width respected?

Browsers handle percentages differently, it would not be wise to put too many decimals places straight into the layout. Browsers either round up or down, so you can try to round it up and see if you find a solution.

Community
  • 1
  • 1
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • Any idea why it fixes itself on device rotation/refresh? Also, the difference is so great I can't imagine its a rounding error... – Stephen Panzer Dec 10 '13 at 01:24
  • You could have some element in your code set with "position: fixed" for example and safari it's well known for having a bug. A workaround is to set those "position: absolute".But that's more on focus on input boxes. I should see all your code to have an idea. – Alessandro Incarnati Dec 10 '13 at 01:29
  • 1
    Hey, I think you're right about it being a rounding error - described here http://css-tricks.com/percentage-bugs-in-webkit/. I actually fixed it by just floating the second element right and abandoning multiple different column layouts. – Stephen Panzer Dec 10 '13 at 04:26