Search code examples
cssmobileviewport

Mobile is displaying "miniature" of desktop content layout instead to adjust accordingly to its width

This issue is related to the same project that I posted another issue a few minutes ago and maybe it's simpler to resolve.

When I click the mobile icon in Chrome console, instead to use the actual size of the mobile it's emulating (in this case an iPhone 10 with a width of 375px) it shows a tiny contents as if I was looking at a desktop layout into a small mobile screen.

Here a couple images from my screen to make it more clear. Notice that the mobile view is just a miniature of the desktop view while I would like that it adapt the layout to the smaller width.

enter image description here

HOWEVER if instead clicking onto the mobile icon I just drag the console window to the left and squeeze the viewport manually it will work as expected and will redistribute the content correctly. See:

enter image description here

Here is my HTML and CSS code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="OEPanel.css">
    </head>

    <body>
        <div id="oepanel" class="OEContainer" >
            <div id="oecell11" class="OECell">
                cell 1
            </div>
            <div id="oecell12" class="OECell">
                cell 2
            </div>
            <div id="oecell13" class="OECell">
                cell 3
            </div>
    </div>
    </body>
</html>

.OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

What am I missing here?

Solution

  • Yan!

    I think your code is missing some things, here is an example that uses Flexbox to make what u're looking for.

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="oepanel" class="OEContainer" >
        <div id="oecell11" class="OECell">
            cell 1
        </div>
        <div id="oecell12" class="OECell">
            cell 2
        </div>
        <div id="oecell13" class="OECell">
            cell 3
        </div>
</div>
</body>
</html>

    In the Head section of your code was missing some Meta tags that are important for compatibility and proper responsive of the code.

    CSS:

    .OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    display: flex;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

@media (max-width: 500px) {
    .OEContainer {
        flex-direction: column;
        align-items: center;
    }
}

    And in the CSS i used flexbox to make it responsive using a media querie. Just added a display: flex; in the main .OEContainer and in the media queria for the mobile i changed the flex-direction to column.

    I'm just a begginer at coding, but hope this helps you.