So I was learning how to make a shoe website, but the content of the website keeps overflowing and doesn't fit my whole screen. I think the main reason is because I added vw and vh for the width and height respectively. I believe I need to replace it, but I'm not sure with what. (edit: i looked at the css file in deeper details and it's not just the vw and vh codes, it's more than that)
Here's the code:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #cb021c;
font-family: "Roboto", sans-serif;
margin: 0;
transition: background 0.4s ease-in-out;
}
a {
color: white;
text-decoration: none;
}
.hamburger {
position: fixed;
top: 2rem;
left: 2rem;
font-size: 3rem;
}
.phone {
position: fixed;
top: 2rem;
right: 2rem;
font-size: 3rem;
}
.logo {
color: white;
font-size: 1.7rem;
margin: 2rem 0;
text-align: center;
}
.logo i {
font-size: 3rem;
}
.logo h2 {
font-weight: normal;
margin: 0;
}
.logo p {
color: #1f1f1f;
font-weight: bold;
margin: 0;
}
.carousel-container {
overflow: hidden;
position: relative;
height: 60vh;
width: 100vw;
margin-top: 10rem;
}
.carousel {
display: flex;
position: absolute;
left: 0;
top: 0;
transform: translateX(0);
transition: transform 0.4s ease-in-out;
}
.slide {
width: 100vw;
text-align: center;
}
.slide img {
object-fit: cover;
height: 400px;
width: 400px;
}
.slide h1 {
color: white;
font-size: 4rem;
margin-top: -2rem;
}
.slide a {
background-color: #1f1f1f;
padding: 1rem 2rem;
font-size: 1.5rem;
}
.arrow {
background-color: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: 30%;
transform: translateY(-50%);
font-size: 5rem;
color: black;
opacity: 0.5;
}
.left-arrow {
left: 2rem;
}
.right-arrow {
right: 2rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Footwear</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<a href="#" class="hamburger">
<i class="fas fa-bars"></i>
</a>
<a href="#" class="phone"><i class="fas fa-phone"></i></a>
<div class="logo">
<i class="fas fa-shoe-prints"></i>
<h2>Shoe are us</h2>
<p>Find the right fit for you</p>
</div>
<div class="carousel-container">
<div class="carousel" id="carousel">
<div class="slide" data-bg="cb021c">
<img src="Images/shoe1.jpg" alt="shoe1" />
<h1>Performance</h1>
<a href="#">Learn More</a>
</div>
<div class="slide" data-bg="B3E140">
<img src="Images/shoe2.jpg" alt="shoe2" />
<h1>Design</h1>
<a href="#">Learn More</a>
</div>
<div class="slide" data-bg="EEEFF1">
<img src="Images/shoe3.jpg" alt="shoe3" />
<h1>Comodity</h1>
<a href="#">Learn More</a>
</div>
<div class="slide" data-bg="C6C5C1">
<img src="Images/shoe4.jpg" alt="shoe4" />
<h1>Lightness</h1>
<a href="#">Learn More</a>
</div>
</div>
<button id="left" class="left-arrow arrow">
<i class="fas fa-chevron-left"></i>
</button>
<button id="right" class="right-arrow arrow">
<i class="fas fa-chevron-right"></i>
</button>
<div class="progress"></div>
</div>
</body>
</html>
