skip to Main Content

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

4

Answers


  1. 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. 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. auto is not a valid value for max-width

    You can take 100% or inherit

    Login or Signup to reply.
  4. 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