CODEWITHSUNDEEP
htmlcss
ejordan
ejordan

Reputation: 1

div widths on mobile

I have three divs that I want to span the full width of the browser (each div taking up 33% of the screen each). On the mobile version, I have each div wrapping and descending in a stack, one above the other. But I want each div to span 100% of the mobile width.

What width should I set each div's width to accomplish this. When I set the width of each div to 33%, it works for the desktop version, but on mobile each div is being squished into 33% of the real estate. 

<style type="text/css">
.wrapdiv {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 padding:20px;
}
</style>


<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

Upvotes: 0

Views: 68

Answers (3)

winresh24
winresh24

Reputation: 687

You can use media queries to make it responsive. The code shows that when the screen reach 420px the width will apply. 

 @media screen and (max-width:420px){
    .wrapdiv{width:100%;}
    }

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11506

Demo

html

<div id="example">
    <div id="block-1" class="wrapdiv">First</div>
    <div id="block-2" class="wrapdiv">Second</div>
    <div id="block-3" class="wrapdiv">Third</div>
</div>

css

.wrapdiv {
    display: table-cell;
    background:#ccc
}
/* will make each div 33% */
#example {
    display: table;
    width: 100%;
}
@media screen and (max-width:420px) {
    #block-1 {
        display: table-footer-group;
        border:1px solid red !important;
    }
    /* Will be displayed at the bottom of the pseudo-table */
    #block-2 {
        display: table-row-group;
        border:1px solid red !important;
    }
    /* Will be displayed in the middle */
    #block-3 {
        display: table-header-group;
        border:1px solid red !important;
    }
    /* Will be displayed at the top */
}

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

You need to use media queries along with the viewport meta element. Here's a simple demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
 width: 30%;
 float: left;
 padding:20px;
}

@media screen and (max-width: 600px) {
    div {
        width: 100%; 
        float: none;
    }
}

</style>
</head>
<body>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

</body>
</html>

Upvotes: 0

Related Questions