In my project, I'm attempting to create a container called .data that will display flex on screens with a width of less than 768px. If the screen width is greater than that, it should be displayed as a grid.
Upon testing in Chrome developer settings without using the "Toggle device toolbar" option, the layout works as expected. However, when I utilize the "Toggle device toolbar" option, the grid layout is displayed even if the screen width is less than 768px. Testing on a mobile phone also reveals that it's not functioning correctly.
If you'd like to see the app, it's deployed at this link.
If you want to view the entire code base, it can be found in the repository located here.
https://i.sstatic.net/QIiHu.png
https://i.sstatic.net/d6yrr.png
Below is the CSS and Pug markup:
CSS:
.data{
display: flex;
flex-direction: column;
padding: 10px;
}
@media only screen and (min-width: 768px ) {
.data{
text-align: justify;
display: grid;
gap: 20px;
padding: 10px;
grid-template-columns: repeat(3,1fr);
grid-template-areas: "heading heading notification";
}
.heading{
grid-area: heading;
text-align: justify;
}
.notification{grid-area: notification;}
}Pug file:
extends base
block content
.main
.home
.content
h1.content WELCOME TO WINROBOT
.data
.heading
h2 Heading
p Lorem, ipsum dolor sit amet consectetur adipisicing elit...
.notifications
h2 Notifications
if (user && user.role === 'admin')
button.btn.btnAddNotification new notification
.note
h3.ntitle title
p.ndate Date
p.ncontent notification content
if (user && user.role === 'admin')
button.btn.btnDeleteNotification Remove Resulting HTML from the browser:
<!DOCTYPE html>
<html>
<head>
<title>Winrobot | Home</title>
<link rel="shortcut icon" type="image/png" href="/img/favicon.png"/>
<link rel="stylesheet" href="/css/styles.css"/>
</head>
<body>
<nav class="navbar">
...
</nav>
<div class="main">
<div class="home">
...
</div>
<div class="data">
...
</div>
</div>
<footer class="footer">
...
</footer>
...
</body>
</html>