Ronald Ng Ronald Ng - 3 months ago 6
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???


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.