I am currently enrolled in an online course on Bootstrap through Udemy. The issue I'm facing is that the course was created back in 2018, and as I follow along, many elements are not responsive. Text sizes are not displaying as assigned, and fonts are not rendering properly, which can be quite frustrating. If anyone understands what might be causing this, please offer your assistance! The stylings aren't being applied correctly to certain elements.
#title{
background-color:#FF4C68;
color: #fff;
}
body{
font-family: "Montserrat";
}
h1{
font-size:12rem;
line-height:1.5;
font-family:"Montserrat-Black";
}
h2{
font-size:3rem;
line-height:1.5;
font-weight:bold;
font-family:"Montserrat-bold";
}
h3{
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
p{
color:#8f8f8f;
}
.container-fluid{
padding:3% 15%;
}
.rotate{
transform: rotate(30deg);
}
/* navigationbar */
.navbar{
padding-bottom:8.5rem;
}
.navbar-brand{
font-size:2.5rem;
font-weight:bold;
font-family:"Ubuntu"
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size:1.12rem;
font-family: "Montserrat-light"
}
/* Download buttons */
.Download-button{
margin:5% 3% 5% 0;
}
/* image title */
.title-image{
width:40%;
}
/* features-section */
#features{
padding:7% 15%;
}
.feature-box{
text-align:center;
padding:5%;
}
.icon{
color: #EF8172;
margin-bottom:2rem;
}
.icon:hover{
color: #FF4C68;
}
/* testimonial section */
#testimonials{
padding: 7% 15%;
text-align: center;
background-color:#EF8172;
color:#fff;
}
.testimonial-image{
width:55%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&family=Ubuntu:wght@500&display=swap" rel="stylesheet">