How to make objects on a page of a given width group vertically?

Navigation
1

Well, I'm aligning some div like columns inside another that serves as a container. What I wanted to know is how do I make a certain width of the div or page themselves clustered one on top of the other in a vertical stream?

HTML 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Layout Responsivo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container" class="clearfix">
        <div class="header clearfix">
            <div class="logo">
                logo
            </div>
            <div class="menu">
                menu
            </div>
        </div>
        <div class="content clearfix">
            <div class="col" style="background: red;">

            </div>
            <div class="col" style="background: yellow;">

            </div>
            <div class="col" style="background: cyan;">

            </div>
        </div>
    </div>
</body>
</html>

CSS 

html, body{
    padding: 0;
    margin: 0;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

.container{
    margin: 0 auto;
    margin-top: 0;
    width: auto;
    height: 900px;

    /*...*/
    background-color: #876;
}

.header{
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-bottom: 3.6em;
    background-color: #2C82C9;
}

.logo{
    width: 100%;
    height: 160px;

    /*...*/
    background-color: transparent;
}

.menu{
    width: 100%;
    height: 70px;

    /*...*/
    background-color: #456;
}

/*Content*/

.content{

    margin: 0 auto;
    width: 88%;
    height: 400px;

    /*...*/
    background-color: #546;
}

.col{
    width: 33.33333333333333%;
    float: left;
    display: inline;
    height: 300px;
}
    
asked by anonymous 20.01.2016 / 18:12

2 answers

2

You can use Media Query of css: 

.container {
  width: 100%;
  height: 1000px;
}

.col {
  display: inline-block;
  background: #333;
  width: 30%;
  height: 300px;
  margin: 2px 0;
}

@media (max-width: 500px) {
  .col {
    display: block;
    width: 100%;
    height: 200px;
  }
}
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

With max-width you set the maximum width, when the long page is smaller than this, what you have inside the query will be called.

JsFiddle

    
20.01.2016 / 18:24
1

You can use a media-query 

@media only screen and (max-device-width: 480px) {
    .col{
        width: 100%;
    }
}
    
20.01.2016 / 18:26
Convert string into array format into an array and retrieve values Problems converting data mon dd yyyy hh: mm