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?
Thanks
form-css.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?
Thanks
form-css.css
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 :)
thanks,
Prasadh