So I was building a website layout with a mobile-first approach and then using media query for laptop width: 1024px size. The design has 11 items and follows a flex that wraps. All the items are numbered and colored.
I want the even-numbered boxes on the left and the odd-numbered boxes on the right. It’s doing the opposite, as you can see in Fig,1. I hope someone can solve this and make me look like a dummy cause I spent a lot of time to no avail. Fig.1: Boxes Arrangement
Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<link rel="stylesheet" href="styles5.css">
</head>
<body>
<div class="main-content">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</body>
</html>
Here’s the CSS code:
/* Mobile First */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
}
.item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
flex: 1 1 100%;
}
.main-content > .item:nth-child(odd) {
background-color: orange;
}
.item:nth-child(even) {
background-color: lightseagreen;
}
/* Laptop Layout */
@media (min-width: 1024px) {
.main-content {
justify-content: space-between;
}
.item {
flex: 0 0 48%;
box-sizing: border-box;
}
/* help code goes here */
}
I tried to use “order” attribute and it flipped the even-numbered boxes to the top & odd-numbered boxes to the bottom. You can see how it ended up in Fig,2. Fig.2: Boxes Arrangement using Order, this is not the I wanted.
.item:nth-child(odd) {
order: 2;
}
.item:nth-child(even) {
order: 1;
}
I also tried to use grid layout but the problem with that is I get unwanted gaps. You can view Fig,3 in which the grid layout puts the odds to the right & evens to the left but there is an empty space before box no,1. Fig.3: Boxes Arrangement using Grid Layout
.main-content {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
...
/* Laptop Layout */
@media (min-width: 1024px) {
.main-content {
grid-template-columns: 1fr 1fr;
}
.item:nth-child(odd) {
grid-column: 2;
}
.item:nth-child(even) {
grid-column: 1;
}
}
JavaBongo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.