Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #44847
    dustinmaberry
    Participant

    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

    #135437
    dustinmaberry
    Participant

    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/cjHvnhttp://codepen.io/dustinmaberry/pen/cjHvn”)

    #135439
    Paulie_D
    Member

    >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.

    #135440
    Paulie_D
    Member

    >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.

    #135441
    Paulie_D
    Member

    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

    #135771
    dustinmaberry
    Participant

    > 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)
  • The forum ‘CSS’ is closed to new topics and replies.