Grow your CSS skills. Land your dream job.

Using CSS media queries for smartphone & tablet, Site still loads too wide in viewport

  • # May 17, 2013 at 10:58 am

    I am designing/developing a website for a client, which you can see here: [matthew-labreche.squarespace.com](http://matthew-labreche.squarespace.com/ “matthew-labreche.squarespace.com”) by using visitor access to view it.

    I’ve used css media queries for smartphone, tablet, and beyond mobile and the design is working fine, except that the screen size loads slightly wider than the viewport on mobile. It hangs off the right edge a bit. I can pinch in to ‘zoom out’ a bit and it fits, but I’m not sure why it isn’t loading where it fits to the edge. I’ve tried both 100% width and specifying a certain pixel width in the CSS, and neither seem to make it fit edge to edge on the sides.

    Also, when I re-size my laptop browser window to simulate a more narrow screen it doesn’t use the tablet and smartphone CSS media query to shift the design dynamically, but if you view it on an iPad or iPhone the CSS media query works and displays a simplified design.

    I’ve also made a Pen to show you my entire CSS file for your convenience: [http://cdpn.io/cjHvn](http://cdpn.io/cjHvn “dustin maberry’s pen”)

    Can anyone tell me what I’m doing wrong in the CSS?

    Thanks so much in advance to anyone who’s willing to help.

    Best,
    Dustin

    # May 17, 2013 at 11:05 am

    I tested the codepen link I copied from my pen and it’s taking me to a weird white screen where you have to click ‘Edit This Pen’ to get the CSS code to display… So here’s a non-abbreviated link:

    [http://codepen.io/dustinmaberry/pen/cjHvn](http://codepen.io/dustinmaberry/pen/cjHvn “http://codepen.io/dustinmaberry/pen/cjHvn”)

    # May 17, 2013 at 11:12 am

    >Also, when I re-size my laptop browser window to simulate a more narrow screen it doesn’t use the tablet and smartphone CSS media query to shift the design dynamically, but if you view it on an iPad or iPhone the CSS media query works and displays a simplified design.

    That’s because you’ve used ‘device-width’. Resizing the browser doesn’t affect the resolution of your monitor.

    # May 17, 2013 at 11:15 am

    >the screen size loads slightly wider than the viewport on mobile.

    Is this an iOS or Android issue?

    Is it browser specific? Chrome has a different definition of width than Firefox for instance.

    # May 17, 2013 at 11:17 am

    Also, and it’s not related…this

    is OK **except** for disabling the scale option.

    Some of us wear reading glasses you know.

    My 2c

    # May 20, 2013 at 5:55 pm

    > Is this an iOS or Android issue?

    > Is it browser specific? Chrome has a different definition of width than Firefox for instance.

    iOS. I was using Safari on my iPhone and iPad to test the display. I just have Safari on my iPhone and iPad.
    Is there a better way to target mobile devices without using device-width? I think I got my css media queries from somewhere on CSS-Tricks…

    I am developing it on the Squarespace Developers platform, and I think the code above was already there… If I take out ‘maximum-scale=1′ then that enables complete scaling, and is better for readability, correct?

    Thanks for all of your help. This forum is a wonderful resource.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".