Ronald Ng Ronald Ng - 1 year ago 63
CSS Question

DOM on div with auto width

Assuming I created a div named .main-nav

And I styled the section header like this:

width: auto;

Within the div there's another div named #navbar-brand​


​If I want to do a DOM which when the main-nav's width is longer than 768px then padding of #navbar-brand is gone, how should it be done???

Answer Source

This can be done with javascript of course but more efficiently with pure css media queries when the viewport size is over 768px. Be aware that the media query approach assumes that the .main-nav width is 100% of the viewport width, if the parent container of .main-nav is smaller than the viewport this approach won't necessarily work as you expected

Insert this to your css-file after your default #navbar-brand-settings

@media screen and (min-width: 768px) {
     padding: 0;

Also you will need to add meta viewport -tag to your page for it to work properly with the viewport size, read more here.