Forums

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

Home › Forums › CSS › Media Queries – NEED HELP

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • Author
    Posts
  • September 20, 2013 at 7:52 am #150722
    dzinr38
    Participant

    I am working on our company web site, and it needs to work on several devices. However, I’m having issues with conflicting media queries and am hoping someone can provide me with a solution. I have to make this work on iPad, iPhone, Android phones, Nexus tablet, Windows tablet, Windows phone, desktop and laptop. I am having a hard time finding media queries that support the Windows tablet. The one I tried is conflicting with the media query for Android and Nexus. I’ve searched online and did find lists of media queries, which were helpful in some respects, but nothing that helps prevent the conflicts. I’ve even tried different breakpoints, but it’s almost as if the Android and Windows devices share, and I do not want them to. Also, I need to be sure that there are landscape and portrait modes for tablets and phones, and that has also been a challenge. Any help would be greatly appreciated! Thanks!

    September 20, 2013 at 8:06 am #150728
    Paulie_D
    Member

    Are you including the device width meta tag in the <head>?

    Media queries should not be based on devices anyway but rather at specific breakpoints where the layout needs it.

    What are MQ you currently using?

    Other than that it could be down to pixel densities but that seems unlikely.

    https://css-tricks.com/snippets/css/retina-display-media-query/

    September 20, 2013 at 8:15 am #150731
    dzinr38
    Participant

    I have tried quite a few things. Here is what I have. I do have the device width meta tag, but let me know if it is incorrect, since I have so many devices that need to work with the site. I’m also including all the media queries. If you can provide me some help, I would appreciate it. There are supposedly two sizes for Windows tablets, so that’s where there are a few media queries for that device in landscape and portrait. I’ve used media queries for awhile now, but never had to include this many devices. I’m trying to find a way to make this work across all. Thank you for any help you can provide.

    META IN HEAD:

    /* desktop */ @media (max-width: 979px)

    /* iPad in portrait———– */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

    /Ipad Resolution Starts Here – landscape/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)

    /* desktop and Nexus 10 */

    @media (min-width: 1200px)

    /* For Android and Nexus */

    @media only screen and (min-width: 1200px) and (max-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

    /* for Nexus 10 portrait */ @media only screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

    /* for iPhone 4 portrait*/

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

    /* for iPhone 4 landscape – affecting Windows phone landscape*/

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)

    /* For Windows Tablets2 – Landscape – NEW */ @media only screen and (min-width:1200px) and (max-width:1280px) and (orientation: landscape)

    /* For Windows Tablets1 – Portrait – NEW */ @media screen and (min-width:768px) and (max-width:768px) and (orientation: portrait)

    /* For Windows Tablets2 – Portrait – NEW */ @media screen and (min-width:720px) and (max-width:720px) and (orientation: portrait)

    /* For Windows Phones – Portrait – NEW */ @media screen and (max-width:400px) and (orientation: portrait)

    /* Windows Phone landscape */ @media screen and (max-width:480px) and (orientation: landscape)

    September 20, 2013 at 8:20 am #150737
    Paulie_D
    Member

    I do have the device width meta tag, but let me know if it is incorrect

    Where?

    I see the media queries which I assume are salted amongst your CSS stylesheet.

    If you have that lot in your head then they aren’t going to work.

    Finally, I think you would have to put those MQ in order not by device but by screen width.

    September 20, 2013 at 8:23 am #150739
    Paulie_D
    Member

    I have so many devices that need to work with the site. I’m also including all the media queries.

    I get that but you are designing based on moving goalposts. You MQ will never match every device out there and new ones are out every day.

    I’ll say it again:

    Media queries should not be based on devices anyway but rather at specific breakpoints where the layout needs it.

    September 20, 2013 at 8:26 am #150744
    dzinr38
    Participant

    The viewport line is in the head of my documents. The media queries are in an external style sheet. So, I need to order them by device width and see if that helps? I can try it. The reason I have the devices listed out is so I know what works where thus far. I didn’t have issues until we had to put the Windows tablet into the mix. I haven’t been able to find media queries ANYWHERE online for those particular devices, so it’s been frustrating.

    September 20, 2013 at 8:29 am #150745
    dzinr38
    Participant

    Also, you say to order them by width. Do I go from smallest to highest width? Do I base that on min or max width?

    September 20, 2013 at 9:23 am #150760
    Paulie_D
    Member

    If you let us see the site we can inspect it for ourselves and make sure everything is OK. Do you have a link?

    Also, you say to order them by width. Do I go from smallest to highest width? Do I base that on min or max width?

    https://css-tricks.com/logic-in-media-queries/

    September 20, 2013 at 9:35 am #150763
    dzinr38
    Participant

    Thanks! I’m starting to make some headway, but if I get stuck, I may need your help again and can send you a link to our test site. It’s a work in progress right now.

    September 20, 2013 at 10:53 am #150784
    dzinr38
    Participant

    Thank you. I will give it a try. I’m assuming that it’s still ok that I used px within my styles? Media queries are still a little new to me. Just started diving into them recently.

    April 18, 2014 at 11:08 am #168280
    drotar
    Participant

    jurotek,
    what about landscape mode for tablets and for smartphones does your list take this into account as well?

    April 18, 2014 at 11:09 am #168281
    drotar
    Participant

    jurotek,
    what about landscape mode for tablets and for smartphones – does your list take this into account as well?

    April 18, 2014 at 1:11 pm #168305
    Alen
    Participant

    what about landscape


    @drotar    , I forbid you to ever think about landscape!!! :)

    But seriously, Responsive Web Design is all about using Media Queries, Flexible Layouts and Fluid Images.

    So if your layout/grid is flexible, it should fit whatever viewpoint size you have. Doesn’t matter if the phone is in portrait or landscape orientation.

    April 18, 2014 at 2:29 pm #168308
    __
    Participant

    Doesn’t matter if the phone is in portrait or landscape orientation.

    …which is what we were discussing in your other thread.

    If you have more questions, you should post there, rather than hijacking someone else’s thread from six months ago.

    April 18, 2014 at 2:37 pm #168309
    Alen
    Participant

    I seriously need to start paying attention to those dates.

    Chris, come on make the .reply-date class resemble something like this:

    .reply-date {
  font-size: 48px;
  color: red;
}

    mkaaay bye

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.