Byron Aguirre Byron Aguirre - 4 days ago 6
CSS Question

Override max-width from parent class

I am using a responsive grid layout for mobile and desktop sizes. My goal is to divide the footer in two rows and add a line between them that fit the whole size of the screen. However I have a container class with max-width: 1700px for desktop size so in order to fulfil my goal I create a class, intermediate-line with max-width: none (and also with initial) but still inherits the max-width of the container. here is my code

/********CSS*******/
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1170px;
}

@media(min-width: 48em){
.container > .intermediate-line{
max-width:none;
border-top: solid 1px;
}
}
/******************/

/*******HtML*******/
<footer class="background-primary">
<div class="container">
<div class="row">
<div class="col-1-4">logo</div>
<div class="col-1-4">address</div>
<div class="col-1-4">Phone Number</div>
<div class="col-1-4">Social Media</div>
</div>

<div class="intermediate-line"></div>

<div class="row">
<div class="col-1-4">copyright</div>
<div>Privacy Policy</div>
<div>Terms of Use</div>
</div>
</div>



Answer

Just make two containers and max-width of line 100% and it will stretch to whole screen no matter of container width

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}
.intermediate-line {
  max-width: 100%;
  border-top: 1px solid;
 }
<footer class="background-primary">
  <div class="container">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
  </div>
  <div class="intermediate-line"></div>
  <div class="container">
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>

Comments