When I resize my website the webpage doesn't fit in well
Question
I'm using HTML, SASS & Bootstrap for the website. I've included the source code of the hero section. It worked perfectly fine until I started to look at the responsiveness. The webpage seems to get smaller than the actual screen size. You can check the screenshots
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Restora</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Medula+One&family=Roboto:wght@300&family=Teko:wght@300&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Stylesheet -->
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/0df7cc894a.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="hero-section">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Restora</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
<ul class="icons">
<i class="fa fa-search fa-2x"></i>
<i class="fa fa-cart-plus fa-2x"></i>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-12 hero-img">
<img src="./restora-bg.png" alt="">
</div>
<div class="col-lg-6 col-12 hero-text">
<h1> <span>Experience</span> <br> The Real Taste</h1>
<div class="line"></div>
<p class="lead">Delicious Food For Every Mood</p>
<button>Order Now</button>
</div>
</div>
</div>
</div>
My CSS:
body {
font-family: 'Teko', sans-serif;
box-sizing: border-box;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
// Navbar
.hero-section {
nav {
padding: 0 50px;
a {
font-size: 24px;
font-family: roboto, sans-serif;
letter-spacing: 1px;
font-weight: 500;
}
li {
padding: 0 10px;
}
.navbar-brand {
font-size: 48px;
font-family: 'Medula One', cursive;
}
.icons {
padding-top: 15px;
}
}
}
// Hero-Section
.hero-section {
letter-spacing: 8px;
.hero-img {
// background: url('restora-bg.png') no-repeat;
// background-size: contain;
width: 100%;
}
.hero-text {
padding: 100px 80px;
@media(max-width: 768px) {
padding: 10px;
}
h1 {
font-size: 6rem;
@media(max-width: 768px) {
font-size: 4rem;
}
}
span {
font-size: 8rem;
font-weight: bold;
@media(max-width: 768px) {
font-size: 6rem;
}
}
p {
font-size: 2rem;
padding-top: 30px;
letter-spacing: 2px;
font-family: roboto, sans-serif;
}
button {
font-size: 1.3rem;
font-weight: 600;
padding: 8px 20px;
letter-spacing: 2px;
font-family: roboto, sans-serif;
background-color: white;
border: 3px solid;
&:hover {
border: 2px solid black;
background-color: rgb(0, 0, 0);
color: white;
}
}
.line {
background-color: rgb(146, 1, 1);
width: 100px;
height: 5px
}
}
}
The website is fitting well up to the screen width gets to 600px. But when I lower the screen size more, the webpage seems to get more and more smaller than the actual screen size.
I've used several methods like using max-width on the image, checking the viewport, using different properties to html & body tags to fill the screen size etc.
Please take some time to help me fix it.
4 answers
solution1
0 2021-03-31 15:20:07
I think it's the image which is causing the problem. By default, images are able to span a width wider than the page.
If you add:
img {
max-width: 100%;
}
To the css, it should fix this.
solution2
0 2021-04-01 06:14:29
I think the issue with the image, Try to give it w-100 class OR try to remove it via the inspector and see if it causing the issue or not
solution3
0 ACCPTED 2021-04-03 08:14:57
Hey Akib, The solution looks simple if I'm not wrong, as you've included bootstrap in your project so, just add "img-fluid" or "w-100" class to your img tag.
<img src="./restora-bg.png" class="img-fluid" alt="">
solution4
0 2021-04-03 08:33:10
Is it maybe the nav that's being resized?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.