Twitter Bootstrap Question posted in

Reset or ignore a (max)width in CSS-Twitter bootstrap

I have the following code (codepen)

/******* NO ACCESS ********************/
.container {border: 1px solid green;}
.container > div {border: 1px solid red;}

.container .header {max-width: 50%;}
/**************************************/

.container.reset-header .header {max-width: auto;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">col-4 modified to 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">should be reset to col-4</div>
</div>

I have no acces to modify the inaccesible css, but I would like to reset the col-4 width with a “reset” class. I tried auto, uset or inherit, any of them didn’t gave me the 33,33% – as the col-4 (or any other html attribute set in the code)

.container.reset-header .header {max-width: auto; }
.container.reset-header .header {max-width: unset; }
.container.reset-header .header {max-width: inherit;}

but it didn’t help

Tags:

4

Answers


  1. 0

    I think what you’re looking for is max-width:inherit;

    /******* NO ACCESS ********************/
.container {border: 1px solid green;}
.container > div {border: 1px solid red;}

.container .header{max-width:50%;}
/**************************************/

.container.reset-header .header{max-width:inherit;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-4 picture">col md 4</div>
  <div class="col-4 header">usually is 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col md 4</div>
  <div class="col-4 header">on reset should be col-4</div>
</div>
    Login or Signup to reply.
  2. 0

    You can use the same value of col-4 to reset the max-width.

    Something like this work well:

    .container.reset-header .header {
  max-width: 33.333333%; /* value of col-4 */
}

    Edit:

    What do you think about this solution, it’s little bit tricky but visually you will have the correct rendering:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">col-4 modified to 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4">
    <span class="picture">col-4</span>
    <span class="header">should be reset to col-4</span>
  </div>
</div>

    /******* NO ACCESS ********************/
.container {border: 1px solid green;}
.container > div {border: 1px solid red;}

.container .header {max-width: 50%;}
/**************************************/
.container.reset-header > div{
  border: none;
  padding: 0;
}

.container.reset-header span{
  display: block;
  border: 1px solid red;
}

.container.reset-header .header {
  max-width: 100%;
}
    Login or Signup to reply.
  3. 0

    auto is not a valid value for max-width

    You can take 100% or inherit

    Login or Signup to reply.
  4. 0

    Option 1

    <div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="header">modified. If col-4 is being overriden, I don't see the purpose of .col-4 class</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col-4</div>
  <div class="col-4">should be col-4. Remove the .header class and use a new class for whatever styles you need here and add the new class to the .header above</div>
</div>

    With this you’d be able to clear all CSS code you’re trying to use to override max-width.

    I hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search