meetdilip
Well-Known Coder
The hero image is not responsive while using a medium screen. Help me locate the issue
The only piece of custom CSS code is
And the image used is
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="/ente.css" rel="stylesheet">
<title>Dilip's World</title>
</head>
<body>
<!-- Nav -->
<nav class="navbar fixed-top navbar-expand-lg bg-dark navbar-dark py-3 borderbtm">
<div class="container">
<a href="#" class="navbar-brand">Dilip's</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span navbar-toggler-icon><i class="bi bi-list"></i></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section class="bg-dark text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex justify-content-between align-items-center">
<div><h1>We make dreams come true</h1>
<p class="lead my-4">
Got an idea? Not sure how to make it come true? Let us help you unwrap it. Take help from the finest technocrats in India. We cover all parts that reign the internet today.
</p>
<button class="btn btn-primary btn-lg">Know More</button>
</div>
<img class="img-fluid d-none d-sm-block pt10" src="/img/hero_undraw.png">
</div>
</div>
</section>
<section class="bg-primary text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Stay in Touch</h3>
</div>
</div>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>The only piece of custom CSS code is
CSS:
.borderbtm {
border-bottom: 2px solid #0000004f;
}And the image used is
