The grid display's columns are hidden on smaller screen devices

Question

The grid display's columns are hidden on smaller screen devices

I am working on a webpage with the following HTML structure:

.main {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.main>div {
  height: 200px;
}

.main>div:first-child {
  border: solid 3px red;
}

.main>div:last-child {
  border: solid 3px blue;
}

<div class="main">
  <div>
    contents 1
  </div>
  <div>
    contents 2
  </div>
</div>

https://i.sstatic.net/MpATU.png I am pleased with the current layout where the blue div is twice the width of the red div. However, I am facing an issue when the screen size is reduced to less than 246px, causing the blue div to hide under the browser edge :

https://i.sstatic.net/VSAAz.png

How can I ensure that the ratio between the two divs remains consistent even on smaller screen sizes?

Update: I have removed the font-size property but the problem persists.

html css media-queries css-grid mobile-devices

Answer 1

Answer №1

To ensure proper display on mobile devices, it is important to include the viewport meta tag in your HTML code and adjust the initial margin and padding for the html and body tags.

Here is an example of how the final code should look like:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .main {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .main>div {
            height: 200px;
        }

        .main>div:first-child {
            border: solid 3px red;
        }

        .main>div:last-child {
            border: solid 3px blue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>
            contents 1
        </div>
        <div>
            contents 2
        </div>
    </div>
</body>

</html>

Answer 2

To ensure proper display on mobile devices, it is important to include the viewport meta tag in your HTML code and adjust the initial margin and padding for the html and body tags.

Here is an example of how the final code should look like:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .main {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .main>div {
            height: 200px;
        }

        .main>div:first-child {
            border: solid 3px red;
        }

        .main>div:last-child {
            border: solid 3px blue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>
            contents 1
        </div>
        <div>
            contents 2
        </div>
    </div>
</body>

</html>

The grid display's columns are hidden on smaller screen devices

Answer №1

Similar questions

Achieving a smooth sliding motion with the help of jQuery animation

Automating item selection using Selenium in Python

An issue with JSPDF arises when used on mobile devices

Ways to verify the input text for content without activating the submit action using only JavaScript

Connecting external websites in XAMPP: A beginner's guide

Progress Circles on Canvas in FireFox

Discovering an <a> element with an href attribute containing two specified strings

Fixed header similar to Twitter's design

Rotating through elements in timed intervals

Using jQuery does not automatically pre-check multiple checkboxes. This issue may arise when using PHP and AJAX together

Hide a header and bring it back after a 2-second delay

Notification continuously appears when clicking outside of Chrome

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

Achieving vertical centering in Bootstrap using the "table-cell" method

Relative positioning can break the background-clip attribute for text elements

Resizing SVG to specify width in pixels and automatically adjust height

Learn how to dynamically apply a CSS attribute for a set period of time using jQuery and automatically revert it back to its original state after 2 seconds

Generate several invoices with just a single click using TypeScript

Eliminating duplicate data submissions with jQuery Ajax

Removing the final BR elements from a div using jQuery