CODEWITHSUNDEEP
htmlcssresponsive
Julie24
Julie24

Reputation: 279

responsive design breakpoints

I am trying to get away from bootstrap, and actually control my breakpoint myself. Before I go on with learning, I would like to know if I am on the right track. So is it correct to do it like this:

HTML:

<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="container">
        <img src="banner.png"/>
            <section id="left-column">
                <p>This is the left column</p>
            </section>
            <aside id="right-column">   
                <p>This is the right column</p>
            </aside>
    </div>
    <!-- /Container -->

</body>
</html>

CSS:

#container {
    width: 960px;
    margin: 0px auto;
}

#left-column {
    width: 700px;
    float: left;
    background-color: red;
}
#right-column {
    width: 260px;
    float: left;
    background-color: blue;
}

/* Tablet & Computer */
@media screen and (max-width:959px) {
    #container {
        width:100%;
    }
    #left-column {
        width: 70%;
    }
    #right-column {
        width: 30%;
    }
    img {
        width: 100%
    }
}   

/* Phone */
@media screen and (max-width:640px) {
    #left-column {
        width: 100%;
    }
    #right-column {
        width: 100%;
    }
}
/* Stop Scaling */
@media screen and (max-width:320px) {
    #container {
        width: 320px;
}

Upvotes: 0

Views: 546

Answers (3)

Peter Wilson
Peter Wilson

Reputation: 4319

You can get rid of Bootstrap but you can use their approach in break points

which is

Extra small devices Phones <768px

Small devices Tablets ≥768px

Medium devices Desktops ≥992px

Large devices Desktops ≥1200px

you need to specify grid systems for your columns instead of hard coded columns widths

like 

.col1{
  width:8.33333333%
}

.col2{
  width:16.66666667%
}

.col3{
  width:25%
}

.col4{
  width:33.33333333%
}

.col5{
  width:14.666667%
}

.col6{
  width:50%
}

.col7{
  width:58.33333333%
}

.col8{
  width:66.6666667%
}

.col9{
  width:75%
}

.col10{
  width:83.33333333%
}

.col11{
  width:91.6666666%
}
.col12{
  width:100%
}

Finally you have to define rows for your columns to avoid conflicts in height due to floating of the columns 

.row{
  margin-left:-15px;
  margin-right:-15px;
 }
.row{:after{
  content:'';
  display:block;
  clear:both
}
.col{   //general properties of columns
  padding:15px;
  float:left; 
}

Update: if you didn't clear the floats after row class via clear:both; you will find that the height of columns container is always 0 even if columns has contents this because the float subtract the height of the element from the height of the container

also you need to give it margin-left:-15px; and margin-right:-15px; to keep the first and last columns of the row align with the content of the page

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

I don't think there's a good / bad way to use media queries, just the way you want it to :)

Bootstrap helps you with that by providing different breakpoint to apply to mobile/tablet/desktop and also different class names to help you with your layout style but you can do it from your own by using the breakpoints you want without Bootstrap. (See medias queries information about Bootstrap here : http://getbootstrap.com/css/#grid-media-queries )

So your way to do it is correct. Just close the last bracket here : 

/* Stop Scaling */
@media screen and (max-width:320px) {
    #container {
        width: 320px;
    }
}

Also, I prefer to use fluid width (%) with mobile because it will takes the full width of the screen. In the case of your last media query, the width selected is quite useless (I don't know a lot of devices who go down 320px width)

See here common devices used to help you select media queries : http://mydevice.io/devices/

Upvotes: 2

thebjorn
thebjorn

Reputation: 27311

You can do it that way, but I would suggest using less or sass since it will otherwise be quite tedious (and you should definitely use autoprefixer too!). Technically, you should probably style classes and not ids since it will be less disruptive. You might want to add a min-width, and you should probably verify that 70% + 30% can't ever be more than 100% due to rounding issues.

Flexbox is the new/cool way of doing grids, see e.g. https://css-tricks.com/snippets/css/a-guide-to-flexbox/, but that's just until we get proper grid layouts in css (e.g. https://css-tricks.com/snippets/css/complete-guide-grid/).

Upvotes: 0

Related Questions