I have site that I am working on all of my content is inside a main-container div and I want the content to always stretch to a 100vh, but I can't seem to get it working correctly. my main-container is just a div but each section and the footer are their own flexboxes.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/copyrightScript.js"></script>
<script src="/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script src="scripts/splide.js"></script>
<script src=".js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="/@splidejs/[email protected]/dist/css/splide.min.css">
<title>Mario Shamhon Portfolio</title>
</head>
<body>
<div id="main-container">
<header>
<nav>
<div class="nav-left-side">
<a href="#about-me-section"> Mario Shamhon</a>
</div>
<ul class="nav-right-side">
<li><a href="#about-me-section"> About me</a></li>
<li><a href="#projects-section"> Projects</a></li>
<li><a href="#skills-section"> Skills</a></li>
</ul>
</nav>
</header>
<section id="about-me-section">
<h2>Hi everyone I'm Mario</h2>
<div class="headshot">
<picture>
<img src="images/headshot.jpg" alt="headshot">
</picture>
</div>
<div class="bio">
<p>
Hi all! I'm Mario I recently graduated from San Diego State University with a masters degree in computer Science I really enjoy
all types of software development I am always experimenting to learn new technologies and programming languages. We can only fail if we don't
try!
</p>
<br>
<p>
Apart from coding I enjoy working out or trying out new restaurants
</p>
</div>
<div class="social-links">
<a href="; target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="/" target="_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</section>
<div class="projects-skills-container">
<section id="projects-section">
<h2>ProJects</h2>
<!-- Swiper Container -->
<div class="splide" id="project-slider" role="group" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<!-- Project 1 -->
<li class="splide__slide">
<div class="project-card">
<a href="/" target="_blank">
<img src="images/inventory_management_project.webp" alt="Inventory Management System: React">
<h3>Inventory Management System: React </h3>
<p>
This is an Inventory Management System made using React as the frontend and Express Server
along with MongoDB for the backend. You can view, add, delete, or update product inventory
that are all managed a database I created using MongoDB.
</p>
</a>
</div>
</li>
<!-- Project 2 -->
<li class="splide__slide">
<div class="project-card">
<a href="/" target="_blank">
<img src="images/red_nose_project.webp" alt="Red Nose Pirate">
<h3>Red Nose Pirate: C#</h3>
<p>
This was a platformer game I developed with a group of my peers.
I was responsible for level design and enemy character programming and behavior.
</p>
</a>
</div>
</li>
<!-- Project 3 -->
<li class="splide__slide">
<div class="project-card">
<a href="/" target="_blank">
<img src="images/shell_clone_project.webp" alt="Linux Shell Clone: C">
<h3>Linux Shell Clone: C</h3>
<p>
Developed a functional clone of the Linux shell using C programming language. Implemented features: valid
command execution, input/output redirection, pipeline commands, and background commandexecution. Created custom built-in
functionalities, including directory changing and error checking. Utilized system calls to ensure correct shell functionality.
</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</section>
<section id="skills-section">
<h2>Skills</h2>
<div class="skills-icons-container">
<i class="fa-brands fa-python"></i>
<i class="fa-brands fa-java"></i>
<i class="fa-solid fa-database"></i>
<i class="fa-brands fa-react"></i>
<i class="fa-brands fa-js"></i>
<i class="fa-brands fa-bootstrap"></i>
</div>
</section>
</div>
<footer>
<p>© <span id="year"></span> Mario Shamhon. All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Here is the CSS:
/* VARIABLES */
:root {
--background-color: #74C0FC;
--headings-and-links-color: #1a1c20;
--sections-background-color: #f8f8f8;
--link-hover-color: #ffffff;
--project-card-background-color: #DFDFDF;
}
/* RESET BROWSER DEFAULTS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Sour Gummy";
src: url(fonts/SourGummy-Italic-VariableFont_wdth,wght.ttf);
}
body{
font-family: "Sour Gummy", sans-serif;
}
#main-container {
margin: 0 auto;
max-width: 1200px;
width: 90%;
height: 100vh;
}
a {
color: var(--headings-and-links-color);
text-decoration: none;
}
nav {
background-color: var(--background-color);
display: flex;
justify-content: space-between;
height: 5rem;
align-items: center;
padding: 0 3.125rem;
}
nav .nav-right-side {
display: flex;
list-style: none;
}
nav .nav-left-side a {
font-size: 1.5rem;
font-weight: 600;
}
nav .nav-right-side a {
font-size: 1rem;
font-weight: 600;
margin: 0 0.625rem;
}
nav .nav-right-side a:hover {
color: var(--link-hover-color)
}
/* General Section Styles */
section {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--sections-background-color);
}
/* Section Heading Styles */
section h2 {
font-size: 3rem;
font-weight: 700;
color: var(--headings-and-links-color);
}
#about-me-section {
padding: 0 2rem;
margin-bottom: 2rem;
border-radius: 0 0 10px 10px;
}
#about-me-section .headshot {
width: 20rem;
height: 20rem;
margin-top: 1rem;
margin-bottom: 2.4rem;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
#about-me-section .headshot img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: top; /* Moves the image upwards so the head is more visible */
transition: transform 0.3s ease;
}
#about-me-section .headshot img:hover {
transform: scale(1.05);
}
#about-me-section .bio p {
font-size: 1.25rem;
font-weight: 300;
text-align: center;
}
#about-me-section .social-links {
font-size: 3rem;
}
#about-me-section .social-links i {
color: var(--background-color);
}
#about-me-section .social-links a {
margin: 0 0.75rem;
}
.projects-skills-container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
}
#projects-section, #skills-section {
border-radius: 10px 10px 0 0;
padding: 0 2rem;
gap: 0.625rem;
}
.skills-icons-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.3rem;
}
.skills-icons-container i {
color: var(--background-color);
font-size: 3rem;
}
.project-card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
text-align: center;
background-color: var(--project-card-background-color);
}
.project-card:hover {
transform: scale(1.05);
}
.project-card img {
width: 100%;
max-height: 12.5rem;
object-fit: cover;
border-radius: 10px;
}
.project-card h3 {
margin-top: 1rem;
font-size: 1.4rem;
}
.project-card p {
font-size: 1rem;
padding: 1rem 1rem;
}
footer {
display: flex;
justify-content: center;
background-color: var(--background-color);
color: var(--headings-and-links-color);
padding: 1rem 0;
font-size: 0.875rem;
}
/* TABLETS IN LANDSCAPE */
@media (max-width: 71rem) {
/* 1127px / 16px = 71rem */
/* 71rem * 16px = 1136px */
html {
/* 12px / 16px = 75% */
/* font-size: 87.5%; */
}
}
/* TABLETS IN PORTRAIT */
@media (max-width: 56.6875rem) {
/* 907 /16px = 56.6875rem */
/* 56.6875 * 16px = 907px */
/* I chose this breakpoint because this where
the two start have different widths */
html {
/* 10px / 16px = 50% */
/* font-size: 62.5%; */
}
#about-me-section, #projects-section, #skills-section {
padding: 1.25rem 2rem;
}
.projects-skills-container {
grid-template-columns: 1fr;
row-gap: 2rem;
}
.skills-icons-container {
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
#projects-section {
border-radius: 10px;
}
}
/* MOBILE'S IN PORTRAIT & LANDSCAPE */
@media (max-width: 36rem) {
/* 576px /16px = 36rem */
/* 36rem * 16px = 576px */
html {
/* 9px / 16px = 56.25% */
font-size: 56.25%;
}
}
Here is the JavaScript file for slideshow:
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide', {
pagination: false,
});
splide.mount();
} );