I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without displaying the .sidebar and .ad sections.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="wrapper">
<header class="main-head">The Header</header>
<nav class="main-nav">
<ul>
<li><a href="index.html">Nav 1</a></li>
<li><a href="nav2.html">Nav 2</a></li>
<li><a href="nav3.html">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1 class="h1">Main article area</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p...
<img src="image.webp" alt="Dummy" class="responsive">
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
</body>
</html>.wrapper {
display: grid;
grid-gap: 0;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: auto auto 1fr auto;
height: 100vh;
grid-template-areas:
"header header header"
"nav nav nav"
"sidebar article ad"
"footer footer footer";
}
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 100%;
}
.main-head {
grid-area: header;
background-color: teal;
background-color: red !important;
}
.content {
grid-area: article;
width: 100%;
background-color: orange;
background-color: white !important;
}
.main-nav {
grid-area: nav;
background-color: lightblue;
background-color: red !important;
top: 0;
width: 100%;
position: sticky;
z-index: 9999;
}
.side {
grid-area: sidebar;
background-color: tomato;
background-color: white !important;
}
.ad {
grid-area: ad;
background-color: lightgreen;
background-color: white !important;
}
.main-footer {
grid-area: footer;
background-color: ghostwhite;
}
li {
list-style-type: none;
margin: 0;
padding: 1rem;
}
a {
text-decoration: none;
color: black;
}
ul {
display: flex;
padding: 0;
margin: 0;
}
.main-head, .content, .side, .ad, .main-footer {
padding: 1rem;
}
.responsive {
max-width: 100%;
height: auto;
}
.h1 {
font-size: 48px;
}
a:hover {
color: white;
}
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}I appreciate any assistance and feedback on potential improvements or corrections needed in my code. Thank you!