LebGeeks

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.

samer

Admin

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;
    }
}

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.

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.

abd

Member

Re: CSS Media Queries

Thanks Ayman, Regards.