The boxes have to be of equal length in the first media queire. Two boxes have to be of equal length in the second media and the third third has to stretch all across. In the third media all have to stretch across the body. HTML :
<!DOCTYPE html>
<html>
<head>
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="hbox">OUR MENU</h1>
<div id="obox" >
<span id="ibox" >Chicken Sandwich</span>
<div>
This Fried Chicken Sandwich is THE BEST! It really doesn’t get much better than crispy and juicy fried chicken on a toasted bun with a smoky paprika sauce. It’s easier than you think to make your own fried chicken at home and this recipe will ensure you have succulent chicken every time!
</div>
</div>
<div id="obox" >
<span id="ibox" >Buffalo Chicken Wings</span>
<div>
Buffalo wings are a must for game day, and this fried chicken wings recipe is the BEST way to make them. Get super crispy wings in the most delicious buffalo sauce. They’re so easy to deep fry, and so fun to eat!
</div>
</div>
<div id="obox" >
<span id="ibox" >BBQ Chicken Nachos</span>
<div>
These BBQ Chicken Nachos are the perfect appetizer for game day! Baked in the oven on a sheet pan, they are quick to make and perfect for serving a crowd.
</div>
</div>
</body>
</html>
CSS :
body{
text-align: center;
background-color: #E4F6F8;
margin: 0px;
}
#obox{
background-color: #D3D3D3;
padding: 10px;
margin: 20px;
border: 1px solid black;
width: 400px;
height: 300px;
float: left;
}
#ibox{
border: 1px solid black;
margin:0px;
padding: 10px;
float: right;
font-size: 30px;
font-family: Buffalo;
font-style: bold;
margin:0px 4px 50px 0px;
}
#hbox{
border: solid black;
padding: 10px;
font-size: 30px;
font-family: Times new roman;
font-style: bold;
margin:4px 4px 50px 4px;
}
.pink{
background-color: #aa93b9;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
div{
clear: right;
font-family: Watch;
color: brown;
font-size: 20px;
}
span{
color: black;
}
@media (min-width: 992px){
.box1 , .box2{
width:33%;
}
}
@media (min-width: 768px) and (max-width: 991px){
.box1{
width:50%;
}
.box2{
width:100%;
}
}
@media (min-width: 576px) and (max-width: 767px){
box1 , .box2{
width:100%;
}
}
Ps: I can also not use flexbox or gridbox. Please also can you explain how you are getting the solution.
CodePudding user response：
<!DOCTYPE html>
<html>
<head>
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="index.css">
<style>
body{
text-align: center;
background-color: #E4F6F8;
margin: 0px;
}
.obox{
background-color: #D3D3D3;
padding: 10px;
margin: 20px;
border: 1px solid black;
width: 400px;
height: 300px;
float: left;
box-sizing: border-box;
}
.ibox{
border: 1px solid black;
margin:0px;
padding: 10px;
float: right;
font-size: 30px;
font-family: Buffalo;
font-style: bold;
margin:0px 4px 50px 0px;
box-sizing: border-box;
}
.hbox{
border: solid black;
padding: 10px;
font-size: 30px;
font-family: Times new roman;
font-style: bold;
margin:4px 4px 50px 4px;
box-sizing: border-box;
}
.pink{
background-color: #aa93b9;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
div{
clear: right;
font-family: Watch;
color: brown;
font-size: 20px;
box-sizing: border-box;
}
span{
color: black;
}
@media (min-width: 992px){
.box1 , .box2{
width:30%;
box-sizing: border-box;
}
}
@media (min-width: 768px) and (max-width: 991px){
.box1{
width:50%;
box-sizing: border-box;
}
.box2{
box-sizing: border-box;
width:100%;
}
}
@media (min-width: 576px) and (max-width: 767px){
.box1 , .box2{
width:100%;
box-sizing: border-box;
}
}
</style>
</head>
<body>
<h1 >OUR MENU</h1>
<div >
<span >Chicken Sandwich</span>
<div>
This Fried Chicken Sandwich is THE BEST! It really doesn’t get much better than crispy and juicy fried chicken on a toasted bun with a smoky paprika sauce. It’s easier than you think to make your own fried chicken at home and this recipe will ensure you have succulent chicken every time!
</div>
</div>
<div >
<span >Buffalo Chicken Wings</span>
<div>
Buffalo wings are a must for game day, and this fried chicken wings recipe is the BEST way to make them. Get super crispy wings in the most delicious buffalo sauce. They’re so easy to deep fry, and so fun to eat!
</div>
</div>
<div >
<span >BBQ Chicken Nachos</span>
<div>
These BBQ Chicken Nachos are the perfect appetizer for game day! Baked in the oven on a sheet pan, they are quick to make and perfect for serving a crowd.
</div>
</div>
</body>
</html>
I tried to fix the problem and I have done it. I simple converted the ids to classes as ids are more specific but classes are not. Over-writing a class is is easy but overwriting an id is hard. So, I converted them to classes. This fixed all the problems. You also forgot to start to format a class using '.' in the last media query in css file. The size of media queries is not pretty much good. You can improve it easily. Change the size of the media queries as well as the size of the children they hold within them. I have fixed your problem but the size of media queries is not allowing them to function well.
Just go through the code I have written once and you will understand your mistakes!
Thank You
CodePudding user response：
You need to place them inside containers with width of %percent that would add up (including the margins) to 100%.
Here's an example:
body * {
box-sizing: border-box;
}
.container {
height: 40px;
width: 100%;
border: 1px solid red;;
}
.col {
width: 30%;
margin-right: 5%;
height: 40px;
float: left;
border: 1px solid green;
background: rgba(255, 0, 128, 0.8);
}
.col:last-child {
margin-right: 0px;
}before
<div >
<div >Hello</div>
<div >Hello</div>
<div >Hello</div>
</div>
<div style="clear:both"></div>
after