mobile div dimensions

Question

mobile div dimensions

My webpage has three divs that I want to stretch across the entire width of the browser, with each div taking up 33% of the screen. On mobile devices, I need these divs to stack on top of each other while still occupying 100% of the mobile width.

What should be the ideal width for each div to achieve this layout? When I set the width of each div to 33%, it looks good on desktop but appears squished on mobile screens.

<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>

html css

Answer 1

Answer №1

Utilizing media queries is the key to achieving responsiveness in your design. By specifying certain conditions, such as when the screen width reaches 420px, you can control how elements are displayed.

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

Answer 2

Utilizing media queries is the key to achieving responsiveness in your design. By specifying certain conditions, such as when the screen width reaches 420px, you can control how elements are displayed.

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

Answer 3

Answer №2

To ensure your website is responsive, combine media queries with the viewport meta tag. Below is a basic example:

<!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>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec convallis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    Phasellus tempus suscipit urna, ut ultricies est bibendum eget. In hac habitasse platea dictumst. Proin quis venenatis justo, sed fermentum leo. Nullam eu tincidunt ligula, non gravida quam.
</div>

<div>
    Fusce vulputate vehicula felis in semper. Suspendisse potenti. Maecenas scelerisque magna sed interdum imperdiet. Nunc consequat augue vel metus tempor vulputate.
</div>

</body>
</html>

Answer 4

To ensure your website is responsive, combine media queries with the viewport meta tag. Below is a basic example:

<!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>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec convallis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    Phasellus tempus suscipit urna, ut ultricies est bibendum eget. In hac habitasse platea dictumst. Proin quis venenatis justo, sed fermentum leo. Nullam eu tincidunt ligula, non gravida quam.
</div>

<div>
    Fusce vulputate vehicula felis in semper. Suspendisse potenti. Maecenas scelerisque magna sed interdum imperdiet. Nunc consequat augue vel metus tempor vulputate.
</div>

</body>
</html>

Answer 5

Answer №3

Check out the demo here

Here is the HTML code snippet:

<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>

This is the CSS code snippet:

.wrapdiv {
    display: table-cell;
    background:#ccc
}
/* This will make each div take up 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 */
}

Answer 6

Check out the demo here

Here is the HTML code snippet:

<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>

This is the CSS code snippet:

.wrapdiv {
    display: table-cell;
    background:#ccc
}
/* This will make each div take up 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 */
}

mobile div dimensions

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to make a trail follow my shapes on canvas?

What is the best way to ensure that all of my images are the same size?

Dynamically add a Font Awesome icon to the background of an input text field with React and react-fa

Placing PHP Code - Finding the Right Location

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

Import CSS and JS files into a Node.js project

Strategies for efficiently creating reusable HTML templates for recurring content blocks?

Placing the input-group-addon above the text-input for better positioning

Combine consecutive <p> tags within a <div> container

What CSS style should be used to fill both the thumbs up and thumbs down icons of a glyphicon?

What are the steps to create a customized app bar with React and Material-UI similar to this design?

What is the best method to retrieve information from two tables on a webpage that have identical classes?

Looping through a jQuery script to add a class if a certain condition is met in another class

"Differences can be observed in the behavior of "this" keyword in JavaScript across different browsers,

Unusual actions regarding flexible CSS style sheet

Implementing functionality: Removing a row and applying a CSS class upon button click

Having trouble with clicking a button in HTML?

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

Verification checkbox in Html5 is mandatory