Media Queries

HTML & CSS
1

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

What you could do is set the width to 100% for all devices, and then for desktops that support media queries, do this:

@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:


.box {width: 100%;}

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

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

Glad it was of some help. Now you can see perhaps why I won’t touch grid systems. :slight_smile: