Geek Answers Handbook

How to fold divs vertically on mobile devices, but save them horizontally in the web version?

I added some div tags to create two columns in the wordpress post. Here is the code I used:

#container {
   width:100%;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}

I added the code to my style.css file.

When viewed on my webpage, everything looks good. However, when viewed on mobile devices, this does not look good. The code below is what I added to the post:

<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>

What I would like to do is stack divs vertically when viewed on a mobile device. Is there an easy way to do this for someone with limited coding experience?

thank

+4
source share
3 answers

Take a look at media queries.

@media all and (max-width:800px) //800px for tablets and phones.
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
    }
}

, , .

+5

bootstrap,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
    
    
    <div class="row">
    <div class="col-md-6 col-xs-12">content here</div>
    <div class="col-md-6 col-xs-12">content here</div>
    </div>
0

update css and add this <meta name="viewport" content="width=device-width, initial-scale=1.0">to the head tag in html

#container {
   width:100%;
    overflow: hidden;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}
@media only screen and (max-width: 767px)
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
        padding: 20px 0;
    }
}
<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>
Run code
0
source

More articles:


All Articles