search

painty / CSS-Used-ChromeExt

Get all css rules used by the selected DOM and its children.
https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff
MIT License
263 stars 62 forks source link

responsive web design CSS doesn't work correctly. #6

Closed emmastone9 closed 6 years ago

emmastone9 commented 6 years ago

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.

painty commented 6 years ago

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.

emmastone9 commented 6 years ago

Hey @painty , Bit confused, how would I go about using the web tools inspector with respect to .wrap? Can you please elaborate more?

painty commented 6 years ago

-1 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).