CSS for Responsivness

Please see attached CSS.

I obtained this from someone I hired to make some pages responsive. They are.

I am trying to understand the css.

See line 116 that starts  "@media only screen and (max-width: 768px)".

Does that mean that the classes following are applicable if the screen width is less that 768 and the upper same named classes apply otherwise?

Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Yes, media queries are at the heart of a responsive design.

First, you define your default styles - you then provide overrides on these based on specific media types.

For instance
p {
    margin: 16px 0;
@media only screen and (max-width: 768px) {
   p {
      margin: 12px 0;

Open in new window

In the above example the default style for the p element is margin: 16px 0. As soon as the page is loaded on a device with a screen width <= 768px the style is overridden by the media style margin: 12px 0;

The styles are applied in the order they are written. So the top styles apply first until they are overridden by a style declared further down the style sheet.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Richard,
I checked your CSS and yes the styles after line 116 as you mentioned indeed work ONLY IN CASE when media is only screen and its (max-width: is 768px)

Some extra info for a layman:
CSS = Cascading Style Sheets and they are implemented from TOP TO BOTTOM, line by line.

here is what happens when your page loads in browser:
1) the CSS file loads when it is called in header tag
2) and is interpreted line by line and the styles applied to your page as per in your HTML code.
3) (also other events if any take place as per code) and your page is presented in the browser for the user.

scenario 1: it is a desktop with 1280 X 1024 resolution:
the whole CSS is read BUT the condition of @media only screen and (max-width: 768px) IS NOT TRUE....  
so all the styles below the condition are ignored and page is rendered with all styles ABOVE the condition.
it does not matter even if the styles may have SAME NAME CLASSES above and below the condition in your CSS.

scenario 2: it is a mobile with a display LESS than 786 pixels in width:
The whole CSS is read and ALL STYLES BEFORE the condition are applied to the elements on page.

The condition of screen + width less than 786px IS TRUE.

so all styles after the condition in CSS are applied and OVERWRITE THE CLASSES WITH SIMILAR NAME...  

Imp: not all classes are overwriten.... it only affects the elements which have classes that are mentioned AFTER the width condition in CSS.

hope you understood it :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.