Issue
I am completely new to website designing and have been trying to make a e commerce website from scratch,
here in my website’s products page the footer doesn’t span the whole width. can somebody help me with this. The css and html are divided by a line of asterisks im actually new to stack overflow
i’ve tried searching in w3 schools and many youtube tutorials but all effort is in vain.
please guide me.
thanks in advance (^-^)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery guys</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="logo.png" width="125px">
</div>
<nav>
<ul id="Menuitems">
<li><a href="">Home</a> </li>
<li><a href="">Products</a> </li>
<li><a href="">About</a> </li>
<li><a href="">Contact</a> </li>
<li><a href="">Account</a> </li>
</ul>
</nav>
<img src="cart.png" width="30px" height="30px">
<img src="menu.png" class="menu-icon" onclick="menutoggle()" >
</div>
</div>
</div>
<!--------featured products-------->
<div class="small-container">
<h2 class="title">Featured products</h2>
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
<!------footer----->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Reach us at Whatsapp <span>©</span</h3>
</div>
<div class="footer-col-2">
<img src="logo-white.png" alt="">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi, eos.</p>
</div>
<div class="footer-col-3">
<h3>Useful links</h3>
<ul>
<li>Coupons</li>
<li>Blog post</li>
<li>Return policy</li>
<li>Affiliate</li>
</ul>
</div>
<div class="footer-col-3">
<h3>Follow us</h3>
<ul>
<li>Whatsapp</li>
<li>Maps</li>
<li>Business card</li>
<li>Contact</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 <span>©</span> - Haneesh kenny - <i>made with love and a wierd sense of humour.</i></p>
</div>
</div>
<!--js for toggle menu-->
<script>
var Menuitems = document.getElementById("Menuitems")
Menuitems.style.maxHeight = "0px";
function menutoggle(){
if(Menuitems.style.maxHeight == "0px")
{
Menuitems.style.maxHeight = "200px";
}
else
{
Menuitems.style.maxHeight = "0px"
}
}
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.navbar{
display: flex;
align-items: center;
padding: 20px;
}
nav{
flex: 1;
text-align: right;
}
nav ul{
display: inline-block;
list-style-type: none;
}
nav ul li{
display: inline-block;
margin-right: 20px;
}
a{
text-decoration: none
cornflowerblue
}
p{
color: cornflowerblue;
}
.container{
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn{
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.header{
background: radial-gradient(#fff,#e4ffd3);
}
.header .row{
margin-top: 70px;
}
.btn:hover{
background: #563434;
}
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.col-4{
flex-basis: 25%;
padding: 30px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img{
width: 100%;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #00ff22;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 46%;
transition: translateX(-50%);
}
.h4{
color: #555;
font-weight: normal;
}
.col-4 p{
font-size: 14px;
}
.rating .fa{
color: #ff523b;
}
.col-4:hover{
transform: translateY(-10px);
box-shadow: 8px 6px 34px grey;
}
/*-----offer------*/
.offer{
background: radial-gradient(#fff,#e4ffd3);
margin-top: 90px;
padding: 30px 0;
}
.col-2 .offer-img{
padding: 50px;
transform: translateX(-100px);
}
.small{
color: #555;
}
/*------Testimonial------*/
.testimonial{
padding-top: 100px;
}
.testimonial .col-3{
text-align: center;
padding: 40px 20px;
box-shadow: 0 0 30px 0px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.5;
}
.testimonial .col-3 img{
width: 50px;
margin-top: 20px;
border-radius: 50%;
}
.testimonial .col-3:hover{
transform: translateY(-10px);
}
.fa .fa-quote-left{
font-size: 34px;
color: #ff523b;
}
.col-3 p{
font-size: 12px;
margin: 12px 0;
color: #777;
}
.testimonial .col-3 h3{
font-weight: 600;
color: #555;
font-size: 16px;
}
/*----brands----*/
.brands{
margin: 100px auto;
}
.col-5{
width: 160px;
}
.col-5 img{
width: 100%;
cursor: pointer;
filter: grayscale(100%);
}
.col-5 img:hover{
filter: grayscale(0);
}
/*-----footer----*/
.footer{
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px ;
}
.footer p{
color: #8a8a8a;
}
.footer h3{
color: white;
margin-bottom: 20px;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1{
flex-basis: 30%;
}
.footer-col-2{
flex: 1;
text-align: center;
}
.footer-col-2 img{
width: 180px;
margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
flex-basis: 12%;
text-align: center;
}
ul{
list-style: none;
}
.Copyright{
text-align: center;
}
.menu-icon{
width: 28px;
margin-left: 20px;
display: none;
}
/*------media query for menu--------*/
@media only screen and (max-width: 800px){
nav ul{
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li{
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a{
color: white;
}
.menu-icon{
display: block;
cursor: pointer;
}
}
/*media query for less than 600 px*/
@media only screen and (max-width: 600px){
.row{
text-align: center;
}
.col-2, .col-3, .col-4{
flex-basis: 100%;
}
}
Solution
do this change
.small-container{
width: 100%;
margin: auto;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
max-width: 90vw;
}make a div before the class row like this
<div style="width: 100%; display: flex;justify-content: center;
align-items: center;">
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>i have advice for u dont use max width
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
max-width: 90vw;
}
.small-container{
width: 100%;
margin: auto;
}add div befroe class row and enclude this css
<div style="width: 100%; display: flex;justify-content: center;
align-items: center;">
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>Answered By – novaRit
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0