I am supposed to create a single responsive page, for desktop, tablet, mobile view.
In the desktop view (992px and above), each of the 3 sections should take up equal amount of space on the screen.
In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself.
In the mobile view (equal to or less than 767px), each section should take up the entire row.
The problem arises when i put margins to DIVs, I want to have spaces between each section (DIV) , while keeping the above layout for each view.
i tried, flex:display; only worked for desktop but messed up other views.
for html and css please check here.
https://jsfiddle.net/dboynusk/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
position: relative;
padding: 50px;
height: fit-content;
}
.menu h1{
text-align: center;
}
.sec{
margin-right: 10px;
margin-left: 10px;
margin-top: 20px;
position: relative;
float: left;
border-style: solid;
border-color: black;
border-width: 1px;
background-color: rgba(223, 175, 140, 0.267);
width: fit-content;
}
.title{
padding-bottom: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
width: 120px;
height: 30px;
text-align: center;
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
float: right;
}
.chicken{
background-color: red;
}
.beef{
background-color: pink;
}
.sushi{
background-color: purple;
}
section{
padding: 35px 20px 2px 20px;
}
.row{
width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12 {
float: left;
width: 100%;
}
.col-md-6 {
width: 50%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
}
}
@media (max-width: 767px) {
.col-sm-12 {
float: left;
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="menu"><h1>Our Menu</h1></div>
<div class="row">
<div class="sec col-lg-4 col-md-6 col-sm-12">
<div class="title chicken">Chicken</div>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
</section>
</div>
</div>
<div class="sec col-lg-4 col-md-6 col-sm-12">
<div class="title beef">Beef</div>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
</section>
</div>
</div>
<div class="sec col-lg-4 col-md-12 col-sm-12">
<div class="title sushi">Sushi</div>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
</section>
</div>
</div>
</div>
</body>
</html>
2
Answers
How does this look Khiz29?
https://jsfiddle.net/panchroma/6kzgyhno/
I think the CSS is unchanged, the important bit though is that in your HTML, a typical column is this
Note that the content in the column is wraped in the new
<div class="sec">...</div>The reason your code was giving you a hard time is that you were applying a left and right margin to your columns.
With this updated code, we’re applying the margin to the new
<div class="sec">div, and this way it won’t break your grid*you probably need to format your code bit. some tag are not well placed.
*Your media queries are not correct. Here is a more realistic one
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
Also, you can make use of display:flex to your advantage. using the right properties is what matter. consider using this for large screen.
flex-direction: row sets the element in the container to be on a row. you can you flex-direction: column for smaller screens. gap works magic.