LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 September 15 2012

abd
Member

CSS Media Queries

Hi,

So I viewed this topic:

http://designshack.net/articles/css/20- … web-design

and it's so interesiting but the developer in it used a style sheet for the devices having max width of 800px

@media screen and (max-width: 800px)
and I tried to see what would happen if a device that has a width greater than 800px opened the website and I saw
that the content of the style sheet won't be applied on this screen so how is that and what width should I use so
that the style is applied to all the screens?
thank you.

Offline

#2 September 15 2012

samer
Administrator

Re: CSS Media Queries

Place whatever you want to apply on all screen sizes outside the media query.

/* everything here is applied to all screen resolutions */

@media screen and (max-width: 800px) {
    /* everything here is limited to devices with max width of 800px */
    .nav {
       color: red;
    }
}

Offline

#3 September 15 2012

abd
Member

Re: CSS Media Queries

Ok so as I thought, every code written inside this condition won't be executed unless this condition is correct I've been told that the code will be executed but the website will take a smaller dimension...
so thanks.

Offline

#4 September 15 2012

Ayman
Member

Re: CSS Media Queries

@abd You can think of it as a rule, everything outside any media query condition will get applied on all screen sizes. Any CSS property that is within a media query will get applied only when the criteria in the media query is met.

You have to account for the most popular screen size standards and make sure to set a condition for anything below a certain width and anything above a certain width other than the ranges  such as and (min-device-width : 768px) and (max-device-width : 1024px)

I recommend you read this detailed article to get a good grasp. And when you want to use media queries you can use an existing template with the standard sizes of most popular devices. Check it out here.

Offline

#5 September 15 2012

abd
Member

Re: CSS Media Queries

Thanks Ayman, Regards.

Offline

Board footer