I am new to coding and trying to figure out how to use HTML, CSS and media queries together, to create a 3 item menu of equal containers side by side in desktop view.
In tablet view the menu items shift to 2 menu items staying on the first row and the 3rd menu item shifting to the second row but spans the length of the 2 menu items on the first row.
In mobile view all 3 menu items are stacked one on top of the other. See images below. My breakpoints for desktop are 992px or greater, tablet view is 768px and 991px, and mobile is 990px or less.
I have written the following HTML and CSS in an attempt to duplicate what the images are showing. My menu items do not respond to the media queries I put in my css file. I can only use basic responsive framework for the project.
Any help or guidance would be appreciated.
* {
box-sizing: border-box;
}
h1 {
font-family: calibri, sans-serif;
width: 100%;
margin: 10px;
text-align: center;
}
div.container1 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container2 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container3 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div#menu1 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FF66B2;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
div#menu2 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #990000;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
div#menu3 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FFE5CC;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
p {
font-family: calibri, sans-serif;
margin-left: 10px;
margin-right: 10px;
}
/* For tablets and large phones: */
@media (min-width: 768px) and (max-width: 991px) {
background-color: green;
.col-m-1 {
width: 25%;
}
.col-m-2 {
width: 25%;
}
.col-m-3 {
width: 50%;
}
}
/* For Desktop */
@media only screen and (min-width:992px) {
.col-1 {
width: 33.33%;
}
.col-2 {
width: 33.33%;
}
.col-3 {
width: 33.33%;
}
}<h1>Our Menu</h1>
<div >
<div id="menu1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div id="menu2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div id="menu3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div> 
CodePudding user response：
u checked correctly ? when i checked i got each item got alligned down perfectly and dont use like this use a div container then in css use flex or block or whatever u want that would be more easy to use and in css /* For tablets and large phones: */ under this there is a mistake u dont set the element for "backgorund-color:green"
CodePudding user response：
Wrap all of your containers in a new <div> container with class container-box and add the following CSS styles to it.
.container-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
Applying these modifications to your code:
* {
box-sizing: border-box;
}
h1 {
font-family: calibri, sans-serif;
width: 100%;
margin: 10px;
text-align: center;
}
.container-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
div.container1 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container2 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container3 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div#menu1 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FF66B2;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
div#menu2 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #990000;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
div#menu3 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FFE5CC;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
p {
font-family: calibri, sans-serif;
margin-left: 10px;
margin-right: 10px;
}
/* For tablets and large phones: */
@media (min-width: 768px) and (max-width: 991px) {
background-color: green;
.col-m-1 {
width: 25%;
}
.col-m-2 {
width: 25%;
}
.col-m-3 {
width: 50%;
}
}
/* For Desktop */
@media only screen and (min-width:992px) {
.col-1 {
width: 33.33%;
}
.col-2 {
width: 33.33%;
}
.col-3 {
width: 33.33%;
}
}<h1>Our Menu</h1>
<div >
<div >
<div id="menu1">Chicken</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
</p>
</div>
<div >
<div id="menu2">Beef</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor.
</p>
</div>
<div >
<div id="menu3">Sushi</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor.
</p>
</div>
</div>CodePudding user response：
I reworked your code a bit and did this using flexbox and nth-child selectors. Exactly what you asked for in the 3 sample screenshots, done with a mobile first approach.
* {
box-sizing: border-box;
}
h1 {
font-family: calibri, sans-serif;
width: 100%;
margin: 10px;
text-align: center;
}
.flex-container .item {
background-color: #A0A0A0;
border: 1px solid black;
font-family: calibri, sans-serif;
margin: 1rem;
overflow: hidden;
padding: 1rem;
}
.flex-container .item .menu {
height: 20px;
width: 125px;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
transform: translate(1rem, -1rem)
}
.flex-container .item:nth-child(3n 1) .menu {
background-color: #FF66B2;
}
.flex-container .item:nth-child(3n 2) .menu {
background-color: #990000;
color: white;
}
.flex-container .item:nth-child(3n 3) .menu {
background-color: #FFE5CC;
}
.flex-container .item > *:nth-child(2) {
margin-top: 0;
}
.flex-container .item > *:nth-last-child(1) {
margin-bottom: 0;
}
@media (min-width: 768px) {
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container .item {
width: calc(50% - 2rem);
}
.flex-container .item:nth-child(3n 3) {
width: calc(100% - 2rem);
}
}
@media (min-width:992px) {
.flex-container .item,
.flex-container .item:nth-child(3n 3){
width: calc((100% / 3) - 2rem);
}
}<h1>Our Menu</h1>
<div >
<div >
<div >Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div >Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div >Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div >Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div >Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div >
<div >Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>