CODEWITHSUNDEEP
htmlcssmedia-querieswidthresponsive
db567go
db567go

Reputation: 11

having problem with the width in media queries and that's why it;s not at all responsive

here is the link of my code

https://jsfiddle.net/bb567go/wzg21fnk/

<!DOCTYPE html>


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module-2 Assignment</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

*{ margin:0;
padding:0;
box-sizing: border-box;
}

body{
font-size: 15px;
font-family: cursive;

}

h1{
text-align: center;
position: relative;
top:50px;
}

section{
height:100vh;
width:100%;
display: flex;
flex:row wrap;
justify-content: center;
align-items: center;
border:2px solid black;

}

#pink{
background-color: rgb(228, 111, 169);
}
#red{
background-color: rgb(216, 61, 61);
color: white;
}
#yellow{
background-color: rgba(245, 220, 77, 0.904);

}

.btn
 {
 position: relative;
 top:-25px;
 right:-5px;
 height:25px;
 float: right;
 width:100px;
 border: none;
 outline:none;
 border-bottom: black;
 
 border-left: black;
 }


 .gray{
 border: 2px solid black;
 justify-self: center;
 margin: 15px 10px;
 background-color:gray;
 align-self: center;
 width:100%;
 height:200px;
 line-height: 20px;

 padding: 25px 5px 5px 5px;

 }

 @media only screen and (min-width:991px){
     


    .gray{
      width:33.3%;
    }
 }
  @media only screen and (min-width:768px) and (max-width:991px){
    #item-1,#item-2{
         width:50%
    }
    #item-3{
       width:100%
    }}
    @media only screen and (max-width:767px){
        .gray{
            width:100%
        }
    } 









</style>
<h1>Our Menu</h1>
<section class="main-section">
  

        <div class="gray" id="item-1">
            <div> <button class="btn" id="pink">Chicken</button></div>
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto necessitatibus 
magnam modi
            harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis placeat 
dolorem
            dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam, 
alias quisquam
            sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
  
        <div class="gray" id="item-2">
            <div> <button class="btn" id="red">Beef</button></div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto 
necessitatibus magnam modi
                harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis 
placeat dolorem
                dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam, 
alias quisquam
                sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
     
        <div class="gray" id="item-3">
            <div> <button class="btn" id="yellow">Sushi</button></div>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto 
necessitatibus magnam modi
                harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis 
placeat dolorem
                dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam, 
alias quisquam
                sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>


    </section>

i want my responsive design to be like this: on desktop with all the grey boxes with text in one line

on tablet i want the first two boxes covering half half space in the first line and the third box in the next line covering the space the sum total of the first two boxes that were present on the previous line

on mobile phones every box in next line

Upvotes: 1

Views: 44

Answers (2)

Amit Gajera
Amit Gajera

Reputation: 56

I saw your code, not in the media query issue. You have lost any other features, so you can use the solution below.

Solution:

section{
  flex-wrap:wrap
}

Upvotes: 3

Aaron
Aaron

Reputation: 196

Hey I played around with your code and I believe I put you on the right track.

Check it out: https://jsfiddle.net/d9L36wjh/6/

*, *:before, *:after {
    
    box-sizing: border-box;
}

body{
    font-size: 15px;
    font-family: cursive;
   
}

h1{
    text-align: center;
    
    top:50px;
}

section{
  display: flex;
  height: 100vh;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
}

#pink{
    background-color: rgb(228, 111, 169);
}
#red{
    background-color: rgb(216, 61, 61);
    color: white;
}
#yellow{
    background-color: rgba(245, 220, 77, 0.904);

}

.btn
   {
     position: relative;
     top: -25px;
     right: -5px;
     height: 25px;
     float: right;
     width: 100px;
     border: none;
     outline: none;
     border-bottom: black;
     border-left: black;
     }


.gray{
     border: 2px solid black;
     margin: 15px 10px;
     background-color: gray;
     width: 400px;
     height: auto;
     line-height: 20px;
     padding: 25px 5px 5px 5px;

 }

@media (max-width: 480px) {
       
 section {
   flex-direction: column;
 }
 .gray {
   width: auto;
 }
        
}
     
@media (max-width: 1280px) {
     
     section {
       align-items: stretch;
     }
    #item-1 {
       flex-grow: 1;
     }
     #item-2 {
       flex-grow: 1;
     }
    #item-3{
      flex-grow: 2;
      
    }
        
}

The rest you gotta do yourself. Check out this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You just need adjust the media query for the column wrap so that it doesn't overflow the section container in mobile view. And you probably want to increase the height of the item container in different viewports. You still got something to do but it shouldn't be a big deal from here.

Update: I adjusted the media query and believe it looks now the way you wanted it to look.

have fun

Upvotes: 1

Related Questions