Upon opening my website on VS Code's live server, everything appears as intended. Media queries successfully resize the navbar, and the Jumbotron image displays correctly. However, when viewing the site on Github Pages, everything appears smaller - from the navbar and text to the Jumbotron image. Additionally, my smallest media query fails to trigger even when the screen is at its minimum size.
I am utilizing SASS and Bootstrap, with the correct CDN link starting with HTTPS. Despite checking for console or network errors, no issues are being reported.
Below is the code snippet from my index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="home">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="index.html">BC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
... (Remaining code truncated for brevity)
Here is an excerpt from my SASS file:
// color variables
$grey: hsl(0, 0%, 66%);
$lightgreen: hsl(80, 17%, 58%);
$black: hsl(203, 24%, 7%);
$green: hsl(120, 100%, 25%);
$white: hsl(0, 0%, 100%);
// Styles common to all pages
.myLogo{
border-radius: 50%;
height: 20vh;
}
.jumbotron{
min-height: 40vh;
max-height: 76vh;
text-align: center;
background-image: url(https://picsum.photos/id/434/1600/550);
img{
display:block;
margin-left:auto;
margin-right:auto;
}
}
... (Continues with more SASS styles)
Lastly, you can view the output CSS file here.
If you would like to see how my website looks on Github Pages, please visit this link. For comparison, here is an image of how it appears on my Live Server: Live Server Image Link.
Your assistance in resolving this discrepancy is greatly appreciated.