Clever Geek Handbook

How do I prevent the min-width from being maxed out?

I created a div that should be 50% (for arguments), but at least a certain width and no more than 100% width (so it never expands the window)

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width: 500px;
    max-width: 100%;
}

Basically I want min-width to work, but I want max-width to be considered MORE important so that it is never wider than the window, I assumed I could do this in order, or at least using! important, but it doesn't seem to be the case.

https://jsfiddle.net/ex716kam/2/

+3


source to share


5 answers


I've given several tries, but I can't seem to get it to work with CSS. I would recommend using simple javascript or media queries to get it to work.

JsFiddle work



@media screen and (min-width:1000px){
    .about{
        width:50%;
    }
}

Note that @lmgonzalves wrote that minimum width is the strongest.

+4


source


max-width: 100%;

Use instead max-width:100vw;

. He will not come out of your window.



0


source


It's hard to see what kind of behavior you expect from 1000px to 500px, but a media query is the simplest way to achieve what you're looking for:

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width:500px;
}

@media screen and ( max-width: 500px ){
  .about {
    width: 100%;
    min-width:0;
  }
}
      

        
        
        
      

    
<div class="about">
        <h1>About</h1>
        <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
</div>
Run codeHide result


0


source


try this code, this code will work when screen width is between 500% and 100% of screen resolution.

@media (min-width: 500px) and (max-width: 800px)
{
.about {
        position:absolute;
        right:0;
        width: 50%;
    }
}
0


source


Just switch the min-width and width values:

.about {
    position:absolute;
    right:0;
    width: 500px;
    min-width: 50%;
    max-width: 100%;
}

https://jsfiddle.net/8fkbp9d0/

0


source






More articles:


All Articles