neo neo - 6 months ago 9
CSS Question

An unexpected behaviour in responsive design using HTML/CSS

I am learning responsive website designing and came across an unexpected behaviour in my own self tried code of the original.

My mentoring source is this-> W3 Schools Learning responsive website designing.
In that if try to reduce the content for less than 600px every div turns to 100% and cover the whole horizontal position.So I assumed thats the normal behaviour for resposive design.

But in my own self written code,if I try less than 600px it doesn't occupy the whole 100%.It turns into a small chunk box of content.You can check it in the chrome inspect or by resizing. What might have probably gone wrong ? Did I missed any declaration ?

Here is my own self tried code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.box1{
background-color :red;
}
.box2{
background-color :green;
}
.box3{
background-color :blue;
}
</style>
<body>
<div class="row">
<div class="col-4 col-m-12 box1"></div>
<div class="col-4 col-m-12 box2"></div>
<div class="col-4 col-m-12 box3"></div>
</div>

</body>
</html>

Answer

Trey is correct. What you are learning here is Mobile First responsive design. So your base style for mobile is

[class*="col-"] { float: left; padding: 15px; }

Anything between 0 and 599 will be this style, which is why you have three boxes floated to the left sized at 30px x 30px.

Then when you get to 600 to 767 the tablet media query adds the width styles.

Then after 768 the desktop media query takes over adding new width styles.

In the example you reference they are setting their base mobile style like so

 [class*="col-"] { width: 100%; }

This is why they get full width columns under 600px.

Hope this helps.

Comments