responsive web design CSS doesn't work correctly.
emmastone9 opened this issue · comments
Go to any RWD website: https://techcrunch.com/
Select the top nav bar class, "nav-bar" in this case.
Click on CSS Used -> Local Preview.
The preview window doesn't show the mobile version of the nav-bar, it shows the desktop version.
Resizing the window doesn't help either.
For CSS rules like .wrap p{...}, if only <p> is selected, the result .wrap p{...} will not apply to <p>. Either change the rule to p{...} or add a .wrap parent in the final HTML.
Hey @painty ,
Bit confused, how would I go about using the web tools inspector with respect to .wrap? Can you please elaborate more?
For example, the css rule with selector .header .header-social only works when <div class="header-social"> is under <header class="header ....
In your case , you select "nav-bar" and click CSS Used -> Local Preview.
In the preview window, the HTML would be <div class="nav-bar"> ...<div class="header-social">... , The selector .header .header-social will apply to none of the elements( because there is no .header in the selected HTML).
'CSS Used` tool only helps you to get the used css rules, while how css rules work depends on the html.
how would I go about using the web tools inspector with respect to .wrap?
I use .wrap just for as an instance. In your case , try inspect <header class="header ... .
BTW, If you want to copy EXACTLY the same looks, try SnappySnippet , which traverses every style property of every element and GENERATE rules: one element one id, one id one set of styles (can always get the same look but no practicably use on production).