SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Media Queries

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media Queries

    My CSS stylesheet supports a 'desktop' and 'mobile' layout depending on screen width (media queries).

    I ensure that the mobile layout is used by default so that if media queries aren't supported that the mobile layout is used.

    (I also use IE 8 specific code to support that, but please ignore that for this post)

    I then style a div something like this (two class names below)

    <div class="half-width-box show-full-width-on-mobile">

    So:

    <style>
    .half-width-box {
    width: 50%;
    }
    @media all and (max-width: 469px) {
    .show-full-width-on-mobile {
    width: 100%;
    }
    }
    </style>

    So now it automatically shows full width on a screen smaller than 470px.

    The problem is that if media queries aren;t supported (e.g. old mobile device) then it won't work properly unless I do this:

    <style>
    .half-width-box {
    width: 50%;
    }
    .show-full-width-on-mobile {
    width: 100%;
    }
    @media all and (min-width: 470px) {
    .show-full-width-on-mobile {
    *** completely ignore this style element as though it wasn't used ***
    }
    }
    </style>

    The above would be great as if media queries weren't supported then it would work, but only if .show-full-width-on-mobile can be ignored at 470px and above.

    I can't set a width value on .show-full-width-on-mobile (for 470px and above) as I don't know what the other class value would be, as it could be something like this:

    <div class="quarter-width-box show-full-width-on-mobile">

    (and of course loads of other styling is needed other than just width on all the class names)

    Hope this makes sense. I really can't completely change everything as the above is just an example of the entire thing.

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    What you could do is set the width to 100% for all devices, and then for desktops that support media queries, do this:

    Code:
    @media all and (min-width: 470px) {
    .box {
      width: 50%;
    }
    Then you can also set the width to 50% for older IEs via a conditional comments (or just let people on outdated browsers get width: 100%).

    This way, you don't need different classes on the div. Just use something like:

    Code:
    .box {width: 100%;}
    
    @media all and (min-width: 470px) {
    .box {
      width: 50%;
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks,

    Your answer is of course perfect, but I actually need the different classes as it is an extension to a grid system, where setting an extra class will render the grid element (column) differently on different screen sizes.

    I've found a way to do it which offers an 'ok' performance for devices which don't support media queries, so this'll have to do. The solution just sets a default value and then overrides some of those settings (but not all as it could override the main grid).

    I can;t really post anything to help others as I doubt anybody really knows what I'm on about.

    I've resolved everything anyway.

    Thanks for the help and for reading my lengthy post!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Thanks for the help and for reading my lengthy post!
    Glad it was of some help. Now you can see perhaps why I won't touch grid systems.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •