Grow your CSS skills. Land your dream job.

Setting up Media Queries for 2 Device Sizes

  • # March 18, 2013 at 11:26 am

    Hello All,

    This forum is awesome – just wanted to preface with that. Thanks for all of your help. I have an interesting issue in that I simply want my site to look the same on an tablets as it does on my desktop. I am using

    @media screen and (min-width : 300px) and (max-width: 600px) {

    and for my viewport I am using

    For some reason my site is squished and not displaying properly on an iPad, although my mobile version looks fine. Im not sure if that is enough info, and can provide more if necessary. Thanks for all of your help!

    -Craig

    # March 18, 2013 at 11:28 am

    That MQ won’t target iPads at all (768px portrait and 1024px landscape iirc)

    # March 18, 2013 at 11:59 am

    I realize it wont target iPads, that was my intention. I only want my site to change for mobile devices. Thanks for the quick responses

    # March 18, 2013 at 12:13 pm

    >I realize it wont target iPads, that was my intention. I only want my site to change for mobile devices.

    The Ipad **IS** a mobile device.

    Unless we see the site we can’t target what the problem might be. However, if the site is wider than 768 (or 1024) it’s NOT going to look the same on tablets as it does on desktops.

    # March 18, 2013 at 12:19 pm

    Gotcha. Yea you are right, i meant smartphones… ok here is the link

    [webdev4](http://webdev4.cns.utexas.edu “cns”)

    Thanks

    # March 18, 2013 at 12:27 pm

    Looks like there is a breakpoint at c.500px that you might need to look at.

    # March 18, 2013 at 2:45 pm

    got it working – strange viewport scaling issue. Works when it is set at .7 Thanks everyone .

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

You must be logged in to reply to this topic.

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