How do I make the navigation menu on my hero image be responsive

HTML & CSS
7

Yes I think you’ve got it :slight_smile:

Imagine you have used the star selector to set border-box.

*{box-sizing:border-box}.

Now at some point in your page you add a third party component (or something you made earlier) where everything is based on the content-box model.

e.g. You have a div of stuff using the border-box:model but inside it you have some other stuff that is using the content-box model.

<div class="stuff">
  <h1>Stuff</h1>
  <p>My Stuff</p>
  <p>My Stuff</p>
  <p>My Stuff</p>

  <div class="other-stuff">
    <div class="more-stuff">
      <h2>Other Stuff</h2>
    </div>
  </div>

  <p>My Stuff</p>
  <p>My Stuff</p>
  <p>My Stuff</p>
</div>

In order for all the ‘other stuff’ to use the content-box model you would need to add extra rules to every element in that section because the universal selector would be setting all to the border-box model.

If we use the box-sizing snippet I gave you we only need to add box-sizing:content-box to .other-stuff. The universal selector is then telling all the children to inherit from the parent already so they automatically follow the parents declaration.

Basically the snippet I gave says inherit box-sizing from your parent. We set the html element to the border-box model which ensures all our page uses it unless we want another section using the content-box value and then we just need to add that property/value to the parent of that section.

It’s not a big issue either way as we could over-ride the universal selector on the inner elements with another universal selector but its best to limit your use of the universal selector because its so… universal :slight_smile:

1 Like