CODEWITHSUNDEEP
htmlcss
Ced
Ced

Reputation: 17327

coexistence of min-width and width

I'm having some trouble making min-width in rem coexist with a width in percentage. When resizing this jsfiddle the outer right block is going under because of the min width restrictions. I'm wondering if there an easy way to go around this and still keep that min-width + width?

<div class="container">
    <div class="first">
    </div>
    <div class="second">
    </div>
    <div class="third">
    </div>
</div>


.container{
    min-width:20rem;
    width:80%;
    border: 1px solid black;
    height:50px;
}
.first{
    min-width:3rem;
    width:15%;
    background:red;
    height:50px;  
    float:left;
}
.second{
    min-width:10rem;
    width:65%;
    height:50px;   
    background:yellow; 
    float:left;
}
.third{
    min-width:7rem;
    width:20%;
    background:green;   
    height:50px;
    float:left;
}

Upvotes: 1

Views: 80

Answers (1)

sid
sid

Reputation: 163

If you want to make the website more responsive when viewing it in mobile devices try using css media queries

See a simple tutorial here W3Schools tutorial

And if you really want deep understanding then this will be major help: CSS Tricks - Media queries

CSS tricks is going to be real helpful for learning anything around CSS

Upvotes: 1

Related Questions