Media Queries Not Working and Page is not responsive - html

Question

Actually, I'm new to HTML and CSS.For practicing, I used a psd & tried to implement, but my media queries are not working. I have tried setting all the container's width to 100% but when I do responsive mode in the browser, a white space comes on the right side. Again, it's breaking when I try to reduce the screen size.Can someone please guide me on this.It would be of immense help.
html,body,ul,li,p{
margin:0px;
padding:0px;
}
.content{
width: 1250px;
margin: 0px auto;
}
.body-container{
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/4hBal14.png);
background-size: cover;
}
#logo {
height: 100px;
vertical-align: middle;
margin-right:250px;
}
.nav-container ul{
list-style-type: none;
background:transparent;
}
.nav-container li{
float: left;
color:white;
font-family: 'Gentium Book Basic', serif;
}
.nav-container ul li:not(:first-child):hover {
text-align:center;
}
.nav-container >ul >li:not(:first-child) {
padding-top:54px;
margin-right:53px;
}
.social-media{
margin-left:-18px;
}
.social-media li{
margin-right:18px;
}
.fa {
text-decoration: none;
}
.fa-facebook {
color:#dab33e;
}
.fa-twitter {
color:#dab33e;
}
.fa-youtube {
color:#dab33e;
}
.nav-container p{
clear:both;
font-family: 'Yeseva One', cursive;
text-align:center;
font-size:48px;
color:white;
padding-top:130px;
margin-bottom:30px;
}
.border{
text-align:center;
}
.border img{
width:230px;
height:50px;
margin-bottom:42px;
}
.button-group{
text-align: center;
padding-bottom:142px;
}
.nav-container .button-1 {
margin-left: 30px;
width:229px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #010101;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background: #201913; /* fallback color for old browsers */
background: rgba(32, 25, 19, 0.5);
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.nav-container .button-2 {
margin-left: 30px;
width:229px;
display: inline-block;
padding: 10px 14px;
color: #fff;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background: #fff; /* fallback color for old browsers */background: rgba(255, 255, 255, 0.5);
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.chef-container{
width:100%;
margin:0px auto;
float:left;
background:url(https://i.imgur.com/ZekPxCX.png) 0 0 repeat;
}
.chef-words{
margin-top:100px;
width:50%;
float:left;
}
.chef-words p{
font-family:'Yeseva One', cursive;
text-align:center;
font-size: 42px;
color:#cc9900;
}
.border-2{
text-align:center;
}
.chef-words .chef-words-2{
font-family: 'Lato', sans-serif;
font-size:14px;
color: #000000;
text-align:center;
margin-top:42px;
}
.chef{
text-align:center;
margin-top:58px;
}
.chef-container .chef-plate{
width: 50%;
float:right;
margin-top:76px;
margin-bottom:82px;
}
.ingredient-container{
clear:both;
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/jrvxhTU.png);
background-size: cover;
padding-top:100px;
padding-bottom:100px;
}
.overlay{
width:570px;
background-color: #221c17;
opacity:0.7;
padding:50px;
margin-left:600px;
}
.overlay h2{
font-family:'Yeseva One', cursive;
color:white;
text-align: center;
}
.overlay p{
font-family: 'Lato', sans-serif;
font-size:14px;
text-align:center;
color:white;
}
.ingredient-images{
text-align: center;
}
.ingredient-images img{
margin-right:30px;
margin-top:72px;
}
.border-5{
text-align:center;
}
.menu{
clear:both;
float:left;
width:100%;
background:url(https://i.imgur.com/LUnK8M7.png) 0 0 repeat;
}
.appetizer{
float:left;
}
.appetizer h1{
margin-left:227px;
font-size:35px;
font-family:'Yeseva One', cursive;
color:#cc9900;
}
.appetizer .border-4 img{
margin-left:210px;
width:230px;
height:28px;
margin-bottom:40px;
}
.appetizer p{
font-family: 'Lato', sans-serif;
}
.appetizer h4{
font-family:'Yeseva One', cursive;
font-size:20px;
margin:0px;
color:#c89f2d;
border-bottom:1px solid;
border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
border-image-slice: 1;
}
.menu-1{
float:left;
margin-left:110px;
margin-bottom:41px;
}
.menu-1 h4{
padding-bottom:13px;
}
.menu-1 p{
padding-top:14px;
}
.menu-1 .items{
margin-right:293px;
}
.menu-2{
clear:both;
float:left;
margin-left:110px;
margin-bottom:41px;
}
.menu-2 .items{
margin-right:206px;
}
.menu-2 h4{
padding-bottom:13px;
}
.menu-2 p{
padding-top:14px;
}
.menu-3{
clear:both;
float:left;
margin-left:110px;
margin-bottom:71px;
}
.menu-3 .items{
margin-right:206px;
}
.menu-3 h4{
padding-bottom:13px;
}
.menu-3 p{
padding-top:14px;
}
.appetizer .salads{
margin-left:266px;
}
.menu-4{
clear:both;
float:left;
margin-left:110px;
margin-bottom:30px;
}
.menu-4 .items{
margin-right:222px;
}
.menu-4 h4{
padding-bottom:13px;
}
.menu-4 p{
padding-top:14px;
}
.special{
position:relative;
clear:both;
float:left;
margin-left:95px;
border:1px solid #e3d4a3;
margin-bottom:28px;
}
.special .special-price{
position:absolute;
top:-20px;
right:-1px;
background-image: url(./special.png);
color:white;
padding-left: 13px;
padding-right: 13px;
text-align:center;
border:none;
}
.special .menu-5 .items{
margin-right:250px;
}
.special .menu-5 h4{
border-bottom: 1px solid;
margin-left: 10px;
margin-right: 14px;
padding-bottom:13px;
}
.special .menu-5 p{
margin-left:10px;
padding-top:13px;
}
.menu-6{
clear:both;
float:left;
margin-left:110px;
margin-bottom:100px;
}
.menu-6 .items{
margin-right:245px;
}
.menu-6 h4{
padding-bottom:13px;
}
.menu-6 p{
padding-top:14px;
}
.starters{
float:left;
}
.starters h1{
margin-left:310px;
font-size:35px;
font-family:'Yeseva One', cursive;
color:#cc9900;
}
.starters .border-4 img{
margin-left:261px;
width:230px;
height:28px;
margin-bottom:40px;
}
.starters .main{
margin-left:270px;
}
.starters .border-10 img{
margin-left:261px;
width:230px;
height:28px;
margin-bottom:40px;
}
.starters p{
font-family: 'Lato', sans-serif;
}
.starters h4{
font-family:'Yeseva One', cursive;
font-size:20px;
margin:0px;
border-bottom:1px solid;
color: #c89f2d;
border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
border-image-slice: 1;
}
.menu-7{
float:left;
margin-left:170px;
margin-bottom:40px;
}
.menu-7 .items{
margin-right:287px;
}
.menu-7 h4{
padding-bottom:13px;
}
.menu-7 p{
padding-top:14px;
}
.menu-8{
clear:both;
float:left;
margin-left:170px;
margin-bottom:73px;
}
.menu-8 .items{
margin-right:252px;
}
.menu-8 h4{
padding-bottom:13px;
}
.menu-8 p{
padding-top:14px;
}
.menu-9{
clear:both;
float:left;
margin-left:170px;
margin-bottom:30px;
}
.menu-9 .items{
margin-right:186px;
}
.menu-9 h4{
padding-bottom:13px;
}
.menu-9 p{
padding-top:14px;
}
.special-price{
position:relative;
margin-left:154px;
clear:both;
float:left;
border:1px solid #e3d4a3;;
margin-bottom:30px;
}
.special-price h4{
margin-left: 14px;
margin-right: 10px;
padding-bottom:13px;
}
.special-price .special-item{
border:1px solid;
position:absolute;
top:-20px;
right:0px;
background-image: url(./special.png);
color: white;
padding-left: 13px;
padding-right: 13px;
text-align: center;
border: none;
}
.special-price .menu-10 .items{
margin-right:252px;
}
.special-price .menu-10 p{
margin-left:15px;
padding-top:13px;
}
.menu-11{
margin-left:170px;
clear:both;
float:left;
margin-bottom:44px;
}
.menu-11 .items{
margin-right:235px;
}
.menu-11 h4{
padding-bottom:13px;
}
.menu-11 p{
padding-top:14px;
}
.menu-12{
margin-left:170px;
clear:both;
float:left;
}
.menu-12 .items{
margin-right:286px;
}
.menu-12 h4{
padding-bottom:13px;
}
.menu-12 p{
padding-top:14px;
}
.review{
clear:both;
width:100%;
margin:0px auto;
background:url(https://i.imgur.com/d1vYNzu.png);
background-size: cover;
padding-top:100px;
padding-bottom:100px;
}
.guest-reviews{
margin-left:240px;
text-align:center;
width:770px;
background-color: #010101;
color:white;
opacity:0.7;
padding:50px;
}
.guest-reviews h2{
font-family:'Yeseva One', cursive;
}
.content >.guest-reviews> p {
font-family:'Gentium Book Basic', bold;
font-size:19px;
color:white;
}
.guest-reviews .food{
margin-top:45px;
}
.contact{
width:100%;
float:left;
margin:0px auto;
background:url(https://i.imgur.com/3mZ8Axw.png) 0 0 repeat;
padding-top:100px;
padding-bottom:100px;
}
.food-items{
float:left;
width:50%;
}
.food-items .food-item-1{
margin-right:30px;
}
.just-container{
float:left;
width:50%;
}
.just-container h1{
text-align: center;
font-family: 'Yeseva One', cursive;
color:#cc9900;
margin-top:-10px;
}
.just-container p{
margin-left: 115px;
font-family: 'Lato', sans-serif;
color:#000000;
}
.above-form-text{
margin-top:28px;
margin-bottom:46px;
margin-left: 115px;
}
form{
margin-left:100px;
}
label {
display:block;
font-size:19px;
}
input{
display:block;
width:200px;
height:34px;
}
input:focus {
outline: none !important;
border:1px solid #c89f2d;
}
select{
display: block;
width:200px;
height:37px;
-webkit-appearance: none;
-moz-appearance: none;
background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #FFF;
background-position-x: 178px;
background-size: 9px;
}
.submit-button {
background-color:#c9a131;
border: none;
color: white;
width:200px;
padding: 13px 61px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
}
.footer-container{
clear:both;
float:left;
margin:0px auto;
width:100%;
margin:0px auto;
background:black;
}
.column {
clear:right;
background: black;
text-align:center;
float: left;
width: 33.33%;
padding-bottom:40px;
}
.column h2 {
color:white;
}
.column p {
color:white;
}
.cards{
margin-top:53px;
}
.social{
margin-top:53px;
}
/* Large devices (laptops/desktops, 992px and up) */
#media (max-width: 992px) {
.nav-container{
width:80%
}
.chef-words{
width:80%;
}
.chef-plate{
width:100%;
margin-right:500px;
}
.ingredient-container{
width:100%;
}
.overlay{
width:20%;
margin:0px auto;
}
.menu{
width:100%;
}
.menu-1{
width:100%;
}
.menu-2{
width:100%;
}
.menu-3{
width:100%;
}
.menu-4{
width:100%;
}
.menu-5{
width:100%;
}
.menu-6{
width:100%;
}
.menu-7{
width:100%;
}
.menu-8{
width:100%;
}
.menu-9{
width:100%;
}
.menu-10{
width:100%;
}
.menu-11{
width:100%;
}
.menu-12{
width:100%;
}
.appetizer{
width:40%;
}
.review{
width:100%;
}
.guest-reviews{
width:40%;
}
.contact{
width:100%;
}
.food-item-1{
width:50%;
}
.food-item-2{
width:50%;
}
.just-container{
width:80%;
}
.footer-container{
width:100%;
}
.column{
width:100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Home</title>
</head>
<body>
<div class="body-container">
<div class="content">
<div class="nav-container">
<ul>
<li><img id="logo" src="https://i.imgur.com/jpWGTQO.png" alt="Skype Logo" width="158px" height="110px"></li>
<li>Home</li>
<li>About</li>
<li>Ingredients</li>
<li>Menu</li>
<li>Revews</li>
<li>Reservations</li>
<li>
<ul class="social-media">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
<p>the right ingredients <br>for the right food</p>
<div class="border"><img src="https://i.imgur.com/Gc18m31.png"></div>
<div class="button-group">
<button class="button-1">Book a table</button>
<button class="button-2">See the Menu</button>
</div>
</div>
</div>
</div>
<div class="chef-container">
<div class="content">
<div class="chef-words">
<p>just the right food</p>
<div class="border-2"><img src="https://i.imgur.com/1PYWBDw.png"></div>
<p class="chef-words-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
Nullam consectetur efficitur odio in ultrices.</p>
<div class="chef"><img src="https://i.imgur.com/V33QPy3.png"></div>
</div>
<div class="chef-plate">
<img src="https://i.imgur.com/NCilq7W.png" width="584px" height="546px">
</div>
</div>
</div>
<div class="ingredient-container">
<div class="content">
<div class="overlay">
<h2>Fine Ingredients</h2>
<div class="border-5"><img src="border-5.png"></div>
<p>If you’ve been to one of our restaurants, you’ve seen – and tasted</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
Nullam consectetur efficitur odio in ultrices.</p>
<div class="ingredient-images">
<img src="pulses.png" width="100px" height="108px">
<img src="rice.png" width="100px" height="108px">
<img src="bread.png" width="100px" height="108px">
</div>
</div>
</div>
</div>
<div class="menu">
<div class="content">
<div class="appetizer">
<h1>Appetizers</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-1">
<h4><span class="items">Taztsiki</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-2">
<h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-3">
<h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<h1 class="salads">Salads</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-4">
<h4><span class="items">Ollive Specials</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="special">
<p class="special-price">Special</p>
<div class="menu-5">
<h4><span class="items">Greek Salad</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="menu-6">
<h4><span class="items">Gusto Salad</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="starters">
<h1>Starters</h1>
<div class="border-4"><img src="border-4.png"></div>
<div class="menu-7">
<h4><span class="items">Haloumi</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-8">
<h4><span class="items">Spinach Pie</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<h1 class="main">Main Dishes</h1>
<div class="border-10"><img src="border-4.png"></div>
<div class="menu-9">
<h4><span class="items">Cornish Mackerel</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="special-price">
<p class="special-item">Special</p>
<div class="menu-10">
<h4><span class="items">Roast Lamb</span><span class="price">$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
<div class="menu-11">
<h4><span class="items">Fried Chicken</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
<div class="menu-12">
<h4><span class="items">Pastitsio</span><span>$3.99</span></h4>
<p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
</div>
</div>
</div>
</div>
<div class="review">
<div class="content">
<div class="guest-reviews">
<h2>Guest Reviews</h2>
<div class="border-5"><img src="border-5.png"></div>
<p> <span><img src="inverted.png"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Aenean consectetur ex fermentum tortor varius elementum. Donec gravida libero nec auctor blandit. <br>
Fusce pretium porttitor ante, quis egestas justo aliquet vitae.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="food">-food inc, New York</p>
</div>
</div>
</div>
<div class="contact">
<div class="content">
<div class="food-items">
<img class="food-item-1" src="food-item-1.png" width="270px" height="508px">
<img src="food-item-2.png" width="270px" height="508px">
</div>
<div class="just-container">
<h1>just the right food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Sed pharetra, magna a porttitor dapibus, nisi augue luctu<br>
Nunc viverra, elit sit amet sagittis lobortis, leo orci</p>
<p class="above-form-text"> </p>
<div class="form">
<form>
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name" placeholder="your name *">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email" placeholder="your email *" >
</div>
<br style="clear:both;" />
</section>
<section>
<div style="float:left;margin-right:20px; margin-top:50px;">
<label for="name">Date</label>
<input id="date" type="date" value="" name="date" placeholder="date *">
</div>
<div style="float:left;margin-top:50px;">
<label for="email">Party Number</label>
<select id="party" >
</select>
</div>
<button class="submit-button" style="clear:both;float:left;margin-left:142px; margin-top:33px;">Book Now!</button>
</section>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

I have gone through your code found out where the issues is. It is with
.content{
width: 1250px;
margin: 0px auto;
}
Here you are specifying fixed width to the container therefore when you reduce the screen width it still has the same width.
You can either use max-width or have a media query for it.
Another reason for horizontal scroll is the margin-left for the .menu-* classes. Since the window width is small margin left is pushing the content outside the canvas therefore causing the scroll.
Hope this helps.
-Help :)

Answer 2

On different view port pls change the width of your .content div as per your requirement,
I can give you some breakpoints like
NOTE:- this is just an example for your idea. use as per your real need and design
#media (max-width: 992px) {
.content {width: 960px;}
}
#media (max-width: 768px) {
.content {width: 740px;}
}
#media (max-width: 481px) {
.content {width: 100%;}
}