Hope you guys can help me figure out what I may have done wrong or different than I should have. I’ve taken a look around SO and I still can’t figure it out. Just to give you a background… I’ve been away from coding for like… 7 years. Had a few personal issues and now I resumed coding.
Basically, there is a project that requires the student to create a simple menu, or list with any type of object (did that inside the div and the class is menu), and when you resize the screen, it will be responsive through the use of media queries. the thing is…
There are six objects.
Max res will show the objects in a line at the top – it’s done and ok, simple.
Medium res will show two objects side by side, in two columns, so basically a 3×2 grid (line x column) – I have no idea why but the items are overlapping and not staying on a specific place as they should. Tried using grid template, but somehow it’s not really effective. I have no idea if the syntax is wrong, but I may have missed something.
Low res will show the objects as a vertical list – done and ok, also simple to do.
To make it easier to analyze and try to find the error, I’ve put everything in the same html code below.
<main>
<head>
<style>
@media (min-width:769px) {
.menu {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
.menu2 {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
}
@media (min-width:481px) and (max-width: 768px){
.parent{
display:grid;
display:block;
height:auto;
grid-template-areas:
"content1" "content2";
}
.menu {grid-area: content1;}{
color: blue;
background-color: yellow;
min-height:150px;
}
.menu2 {grid-area: content2;}{
color: blue;
background-color: yellow;
min-height:150px;
}
}
@media (max-width: 480px){
.menu {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
.menu2 {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="menu">
<p>Objeto 1</p>
</div>
<div class="menu">
<p>Objeto 2</p>
</div>
<div class="menu">
<p>Objeto 3</p>
</div>
<div class="menu2">
<p>Objeto 4</p>
</div>
<div class="menu2">
<p>Objeto 5</p>
</div>
<div class="menu2">
<p>Objeto 6</p>
</div>
</div>
</body>
</main>`
Hope you guys can help me figure out what I may have missed. Thank you!!!
PS. When I first learned css, media queries did not exist, only frameworks such as bootstrap. The thing is, the professor is asking the students to only use the media queries.
Medium res will show two objects side by side, in two columns, so basically a 3×2 grid (line x column)
As mentioned above:
- I have no idea why but the items are overlapping and not staying on a specific place as they should. Tried using grid template, but somehow it’s not really effective. I have no idea if the syntax is wrong, but I may have missed something.
I tried just leaving them inside a div and they also don’t show up as a column, it’s like the code skips this middle part and just shows the lined-up and the vertical menu.