CSS media queries are selectively not working - html

Thank you in advance.
I'm working on the mobile responsiveness of a challenge project and my media queries are only selectively working. Here is my full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontend Mentor | Sunnyside agency landing page</title>
</head>
<body>
<section class="splash_page">
<header>
<nav class="navbar">
<img src="./images/logo.svg" class="sunnyside_logo" alt="sunnyside_logo">
<ul class="nav_links">
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="intro_screen">
<h2>We are creatives</h2>
<img src="images/icon-arrow-down.svg" />
</div>
</section>
<section class="grid_card">
<div class="card_information">
<div class="transform_information_container">
<h2>Transform your brand</h2>
<p>We are a full-service creative agency specializing in helping brands grow fast.
Engage your clients through compelling visuals that do most of the marketing for you.</p>
<a>Learn More</a>
</div>
</div>
<div class="card_image">
<img src="./images/desktop/image-transform.jpg" />
</div>
</section>
<section class="grid_card_2">
<div class="card_information">
<div class="stand_out_information_container">
<h2>Stand out to the right audience</h2>
<p> Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters,
we’ll build and extend your brand in digital places.
</p>
<a>Learn More</a>
</div>
</div>
<div class="card_image">
<img src="./images/desktop/image-stand-out.jpg" />
</div>
</section>
<section class="grid_card_3">
<div class="card_image">
<div class="graphic_design_text">
<h2> Graphic Design</h2>
<p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures
potential clients’ attention.
</p>
</div>
<img src="./images/desktop/image-graphic-design.jpg" />
</div>
<div class="card_image">
<div class="photography_text">
<h2>Photography</h2>
<p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
</p>
</div>
<img src="./images/desktop/image-photography.jpg" />
</div>
</div>
</section>
<section class="testimonials">
<h2>Client Testimonials</h2>
<div class="testimonial_group">
<div class="single_testimonial">
<img src="images/image-emily.jpg" />
<p> We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always
hit.
</p>
<h3 class="testimonial_name">
Emily R.
</h3>
<small>Marketing Director</small>
</div>
<div class="single_testimonial">
<img src="images/image-thomas.jpg" />
<p> Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and
enjoyable experience.
</p>
<h3 class="testimonial_name">
Thomas S.
</h3>
<small>Chief Operating Officer</small>
</div>
<div class="single_testimonial">
<img src="images/image-jennie.jpg" />
<p> Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
</p>
<h3 class="testimonial_name">
Jennie F.
</h3>
<small>Business Owner</small>
</div>
</div>
</section>
<section class="footer">
<div class="image_banner">
<img src="./images/desktop/image-gallery-milkbottles.jpg">
<img src="./images/desktop/image-gallery-orange.jpg">
<img src="./images/desktop/image-gallery-cone.jpg">
<img src="./images/desktop/image-gallery-sugarcubes.jpg">
</div>
<div class="banner_information">
<img src="./images/logo-footer.svg" class="logo_footer"/>
<div class="footer_nav">
<p>About</p>
<p>Services</p>
<p>Projects</p>
</div>
<div class="footer_links">
<svg class="facebook_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="instagram_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.338-9.87a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="twitter_logo" width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="pinterest_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.176-4.068-2.845 0-4.516 2.135-4.516 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S15.523 0 10 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Here is the entire CSS:
#import url('https://fonts.googleapis.com/css2?family=Barlow:wght#600&family=Fraunces:wght#700;900&display=swap');
:root {
--Soft-red: hsl(7, 99%, 70%);
--Yellow: hsl(51, 100%, 49%);
--Dark-desaturated-cyan: hsl(167, 40%, 24%);
--Dark-blue: hsl(198, 62%, 26%);
--Dark-moderate-cyan: hsl(168, 34%, 41%);
--Very-dark-desaturated-blue: hsl(212, 27%, 19%);
--Very-dark-grayish-blue: hsl(213, 9%, 39%);
--Dark-grayish-blue: hsl(232, 10%, 55%);
--Grayish-blue: hsl(210, 4%, 67%);
--White: hsl(0, 0%, 100%);
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
height: 100vh;
font-size: 18px;
}
h2, p, h3 {
margin: 0;
padding: 0;
}
.splash_page {
height: 100vh;
width: 100%;
background-image: url('./images/desktop/image-header.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
font-family: "Barlow";
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2em 3em;
}
.navbar > .nav_links {
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;
margin: 0;
width: 35%;
}
.navbar > .nav_links > li {
font-size: .90em;
}
.navbar > .nav_links > li > a {
text-decoration: none;
color: white;
}
.navbar > .sunnyside_logo {
width: 10em;
}
.navbar > .nav_links > li > .contact_button {
background-color: white;
padding: 1.25em 2em;
color: var(--Very-dark-desaturated-blue);
font-family: "Fraunces";
font-size: .85em;
font-weight: 900;
text-transform: uppercase;
border-radius: 30px;
}
.navbar > .nav_links > li > .contact_button:hover {
background-color: hsl(199, 100%, 75%);
color: white;
transition: .15s;
}
.intro_screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.intro_screen > h2 {
font-family: "Fraunces";
font-weight: 900;
font-size: 3.5em;
letter-spacing: .1em;
text-transform: uppercase;
color: white;
margin: 2em 0 1.65em 0;
}
.grid_card, .grid_card_2, .grid_card_3 {
display: flex;
/* max-height: 75vh; */
}
.grid_card_2 {
flex-direction: row-reverse;
}
.card_information, .card_image {
flex: 1;
}
.card_information {
display: flex;
justify-content: center;
align-items: center;
}
div[class$="information_container"] {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 22rem;
text-align: start;
}
div[class$="information_container"] > h2 {
font-family: "Fraunces";
font-weight: 900;
font-size: 2.5rem;
color: var(--Very-dark-desaturated-blue);
}
div[class$="information_container"] > p {
line-height: 1.75em;
font-size: 1.1em;
color: var(--Dark-grayish-blue);
font-family: "Barlow";
margin: 2rem 0 2rem 0;
}
div[class$="information_container"] > a {
font-family: "Fraunces";
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
color: var(--Very-dark-desaturated-blue);
position: relative;
align-self: flex-start;
padding: 0 .5em;
cursor: pointer;
}
div[class$="information_container"] > a::after {
content: '';
z-index: -1;
width: 100%;
height: 0.5rem;
position: absolute;
left: 0;
top: 70%;
border-radius: 1rem;
/* background-color: hsl(51, 95%, 83%); */
}
div[class^="transform"] > a::after {
background-color: hsl(51, 95%, 83%);
}
div[class^="transform"] > a:hover::after {
background-color: var(--Yellow);
transition: .15s;
}
div[class^="stand_out"] > a::after {
background-color: hsl(7, 91%, 91%);
}
div[class^="stand_out"] > a:hover::after {
background-color: var(--Soft-red);
transition: .15s;
}
.card_image > img {
width: 100%;
height: 100%;
}
.card_image {
position: relative;
display: flex;
justify-content: center;
}
.graphic_design_text, .photography_text {
position: absolute;
z-index: 1;
text-align: center;
bottom: 0;
margin-bottom: 5em;
width: 22em;
}
div[class$="_text"] > h2 {
margin-bottom: .8em;
font-size: 1.75em;
font-weight: 900;
font-family: "Fraunces";
}
div[class$="_text"] > p {
font-family: "Barlow";
font-size: 1em;
line-height: 1.65em;
}
.graphic_design_text > * {
color: var(--Dark-desaturated-cyan);
}
.photography_text > * {
color: var(--Dark-blue);
}
.testimonials {
/* height: 97vh; */
margin: 10em 0 10em 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.testimonials > h2 {
margin-bottom: 5em;
text-transform: uppercase;
letter-spacing: .4em;
font-size: 1.1em;
color: var(--Dark-grayish-blue);
font-family: "Fraunces";
}
.testimonial_group {
display: flex;
width: 70vw;
}
.single_testimonial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 .75em 0 .75em;
}
.single_testimonial > img {
border-radius: 50%;
width: 3.5em;
}
.single_testimonial > p {
font-family: "Barlow";
color: var(--Very-dark-grayish-blue);
margin: 3em 0 4em 0;
line-height: 1.5em;
text-align: center;
font-size: 1em;
}
.single_testimonial > .testimonial_name {
font-family: "Fraunces";
}
.single_testimonial > small {
font-family: "Barlow";
color: var(--Grayish-blue);
margin-top: 1em;
}
.footer {
/* max-height: 100vh; */
background-color: hsl(168, 57%, 72%);
display: flex;
flex-direction: column;
}
.footer > .image_banner {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
width: 100%;
/* margin: 1em 0 1em 0; */
/* height: 60vh; */
}
.footer > .image_banner > img {
width: 100%;
}
.banner_information {
width: 100%;
/* height: 40vh; */
display: flex;
flex-direction: column;
justify-content: center;
margin: 5em 0 5em 0;
}
.logo_footer {
align-self: center;
width: 9em;
margin-bottom: 2.5em;
}
.footer_nav {
width: 20em;
display: flex;
justify-content: space-between;
font-family: "Barlow";
color: var(--Dark-moderate-cyan);
}
.banner_information > .footer_nav {
align-self: center;
display: flex;
margin-bottom: 5em;
}
.banner_information > .footer_nav > *:hover {
color: white;
cursor: pointer;
transition: .15s;
}
.banner_information > .footer_links {
align-self: center;
display: flex;
justify-content: space-between;
width: 9em;
cursor: pointer;
}
.banner_information > .footer_links > svg:hover > path {
fill: white;
transition: .15s;
}
#media (max-width: 1440px) {
.intro_screen > h2 {
font-size: 3em;
margin: 2.5em 0 2em 0;
}
.graphic_design_text, .photography_text {
margin-bottom: 3em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: 1em;
}
div[class$="information_container"] {
max-width: 23em;
}
div[class$="information_container"] > h2 {
font-size: 2em;
}
div[class$="information_container"] > p {
font-size: .9em;
line-height: 1.5em;
}
div[class$="information_container"] > a {
font-size: .9em;
}
.testimonial_group {
width: 85vw;
}
}
#media (max-width: 1200px) {
.navbar > .nav_links {
width: 55%;
}
.graphic_design_text, .photography_text {
margin-bottom: 1.5em;
width: 20em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: .9em;
}
.testimonials {
margin: 7em 0 7em 0;
}
.testimonials > h2 {
font-size: 1em;
}
.single_testimonial > p {
font-size: .9em;
margin: 2em 0 3em 0;
}
};
#media (max-width: 992px) {
.intro_screen > h2 {
color: red;
}
};
#media (max-width: 600px) {
.grid_card, .grid_card_2, .grid_card_3 {
flex-direction: column-reverse;
}
.navbar > .nav_links {
display: none;
}
.intro_screen > h2 {
font-size: 1em;
}
.testimonial_group {
flex-direction: column;
}
};
My problem lies at the end of the CSS code:
#media (max-width: 1440px) {
.intro_screen > h2 {
font-size: 3em;
margin: 2.5em 0 2em 0;
}
.graphic_design_text, .photography_text {
margin-bottom: 3em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: 1em;
}
div[class$="information_container"] {
max-width: 23em;
}
div[class$="information_container"] > h2 {
font-size: 2em;
}
div[class$="information_container"] > p {
font-size: .9em;
line-height: 1.5em;
}
div[class$="information_container"] > a {
font-size: .9em;
}
.testimonial_group {
width: 85vw;
}
}
#media (max-width: 1200px) {
.navbar > .nav_links {
width: 55%;
}
.graphic_design_text, .photography_text {
margin-bottom: 1.5em;
width: 20em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: .9em;
}
.testimonials {
margin: 7em 0 7em 0;
}
.testimonials > h2 {
font-size: 1em;
}
.single_testimonial > p {
font-size: .9em;
margin: 2em 0 3em 0;
}
};
#media (max-width: 992px) {
.intro_screen > h2 {
color: red;
}
};
#media (max-width: 600px) {
.grid_card, .grid_card_2, .grid_card_3 {
flex-direction: column-reverse;
}
.navbar > .nav_links {
display: none;
}
.intro_screen > h2 {
font-size: 1em;
}
.testimonial_group {
flex-direction: column;
}
};
The first two media queries, max-width: 1440px and max-width: 1200px, function perfectly.
The next two, max-width: 992px and max-width: 600px, do not function at all. The red color for the 992 entry is for testing purposes.
If I comment the first two entries out—the larger queries that work—the next one will actually function. I've also tried repositioning the media queries, but the same general problem occurs: the top queries will function, while the bottom ones will not.
I think the issue may stem from either my lack of min-height parameters, although I've tried adding those to the existing code and it breaks or tweaks their current function, or my query positioning. All help is much appreciated!

Related

Symmetry problem with the CSS I apply to an element on the right of my navbar

I would like to decrease the space between my different social networks and by making :
margin: 2px; or padding: 2px;
It doesn't apply any change: how to apply a change between my different icons for my social networks please?
I would like to reduce the spacing between my 3 icons, here is a screen to illustrate my words, if you did not understand even if I think I have correctly explained the problem I will answer in comment, thank you in advance (If you have understood and you want to help me I am interested if you have explanations, I am trying to improve and it's been a few days that I block on this problem): The screen to illustrate my words: https://prnt.sc/13n7pss
If you see other things wrong in my code like this I'm interested, I'm a beginner and I don't necessarily have the best ways to develop so if you think I can improve it don't hesitate to tell me etc. Thank you very much
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="right">
<img src="https://img.icons8.com/windows/32/000000/github.png"/>
<img src="https://img.icons8.com/material-rounded/32/000000/discord-logo.png"/>
<img src="https://img.icons8.com/android/32/000000/twitter.png"/>
</div>
</nav>
</header>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/white.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #065299;">My Discord Id</span></div>
</div>
<div class="social"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" /></div>
<div class="social"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" /></div>
<div class="social"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" /></div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover, .topbar nav a.active {
color: #000;
}
.right {
cursor: pointer;
display: flex;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
padding-right: .5rem;
padding-bottom: 1rem;
}

Here you go...
Add this to your CSS:
.right a {
margin-right: -10%;
}
If you want to decrease white space between your icons, you need to set negative margin-right (not positive!). Positive margin-right will do exactly the opposite that you want to achieve.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62, 62, 62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35, 35, 35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover,
.topbar nav a.active {
color: #000;
}
.right {
cursor: pointer;
display: flex;
}
.right a {
margin-right: -10%;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22, 145, 176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
padding-right: .5rem;
padding-bottom: 1rem;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="right">
<img src="https://img.icons8.com/windows/32/000000/github.png" />
<img src="https://img.icons8.com/material-rounded/32/000000/discord-logo.png" />
<img src="https://img.icons8.com/android/32/000000/twitter.png" />
</div>
</nav>
</header>
</body>
</html>

scroll-snap doesn't snap correctly

I am working on a personal project and i use scroll-snap in this project
but for some reason the scroll snap sometimes overshoots or lands at an awkward position between 2 parts of the page
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
(I recommend opening the snippet in full page)
after countless amounts of time searching for a solution I have given up and landed here
I hope atleast one of you is able to help me

It appears your problem is that you're applying scroll-snap-align: start; to every div within body and so when you scroll it is snapping to each div in your page. Whereas you only want to be applying it to its first child of the body or in your case each section of your page.
So all I have done in the example below is changed body div to body > div in your css.
You can see more information on the greater than sign in css here: What does the ">" (greater-than sign) CSS selector mean?
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body > div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>

How can I align component to be center in whole page?

I'm making this site and working on second page. However, I have trouble for centering component in the whole viewport. I searched lots of solutions including position, display:table, etc. But, I couldn't know how to use for this situation.
.header {
background-color: #F7F7F7;
padding: 15px;
}
.header h1 {
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
float: right;
}
.header__nav li {
float: left;
display: flex;
align-items: center;
height: 38px;
}
.header__nav li a {
margin-right: 39px;
display: inline-block;
font-size: 20px;
font-weight: bold;
transition: all 0.5s;
}
.header__nav li a::after {
content: '';
width: 0;
height: 2px;
background-color: black;
transition: 0.3s;
display: block;
}
.header__nav li a:hover::after {
width: 100%;
}
.header__nav li button:hover::before {
width: 100%;
}
.contents {
padding: 150px 100px;
}
.contents__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.contents__inside strong {
font-style: italic;
font-size: 1rem;
}
.contents__inside h2 {
margin-bottom: 10px;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}
.contents__inside img {
width: 100%;
}
.contents__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto;
}
.info__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.info__inside h2 {
margin-bottom: 30px;
font-size: 4rem;
font-weight: bold;
line-height: 1;
}
.info__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto 100px;
}
.info__inside img {
width: 100%;
}
.footer {
background-color: blue;
}
<header class="header clearfix">
<div class="l-wrapper">
<h1><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</div>
</header>
<section class="contents">
<div class="l-main">
<div class="contents__inside">
<strong>Top quality</strong>
<h2>ICONS</h2>
<p>6,500 unique icons in different categories.
Drawn by hand and designed for perfection.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
</div>
</div>
</section>
<section class="info">
<div class="l-main">
<div class="info__inside">
<h2>Thousands of icons</h2>
<p>6,500 unique icons in 3 style color, line and solid.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
</div>
</div>
</section>
<footer class="footer">
</footer>
Is there an any proper method to solve this issue? How can I implement like original design of website?
EDIT
I don't wanna solve by using CSS3 property to practice CSS2
IMAGE that I wanna fix

If i understand you, You want to center your items in your div
To do that you can
.yourDivClassName{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
<body>
<div class="yourDivClassName">
<button>example button</button>
<p>example text</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU" alt="example image">
</div>
</body>

Adjust Webpage height to User's Viewport

I added media queries to my css files in order to make my website responsive. However, I noticed that there is an issue with the content being cut off at the bottom of the screen on smaller devices (netbooks and smartphones). How do you tailor the height to adjust to the viewer's screen size?
Right Results (longer screens):
Wrong Results (shorter screens):
Note that on this page, the intro section and text cuts off as the screen gets shorter. I'm not sure if it has something to do with me using percentage instead of pixels. What's the best way to combat this?
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
overflow: auto;
background-color: cornflowerblue;
}
.main {
background-repeat: no-repeat;
background-size: cover;
width: 75%;
height: 100%;
float: right;
transition: .3s;
padding: 0;
margin: 0;
}
.nav-bar {
background-color: #4a235a;
width: 25%;
height: 100%;
opacity: 0.9;
transition: .3s;
box-shadow: 2px 0px 4px black;
position: fixed;
}
.bio-feature {
width: 100%;
height: 35%;
background-color: cornflowerblue;
padding: 0;
margin: 0;
}
.intro {
color: white;
font-style: italic;
font-family: "Quicksand" ;
font-size: 1.3em;
margin-left: 6%;
margin-right: 6%;
}
#first-line-intro {
padding-top: 1%;
}
.heading {
/* margin-top: 20px; */
}
h1 {
color: white;
font-family: "Quicksand" ;
padding: 0;
/* margin-top: -12px; */
margin-bottom: 16px;
font-size: 2em;
}
h2 {
color: cornflowerblue;
margin: 15%;
text-decoration: underline;
font-size: 1.5em;
font-family: Quicksand;
}
h3 {
font-family: Pacifico;
padding: 3%;
font-size: 1.2em;
color: lemonchiffon;
font-weight: bold;
}
h6 {
font-family: Ubuntu;
color: navy;
font-weight: 600;
}
p {
padding: 0;
/*margin-bottom: -200px;*/
font-size: 1.2em;
}
.highlighted-text {
color: lime;
}
.highlighted-text2 {
color: darkred;
}
a {
color: white;
}
a:hover {
text-decoration: none;
}
.frontend{
height: 100vh;
background-color: white;
border-right: solid 2px white;
}
.frontend-text, .backend-text {
font-family: Quicksand;
font-size: 1.1em;
text-align: center;
margin: 6% 8%;
}
.frontend-img {
margin-bottom: 6%;
}
#additional-skills {
position: relative;
top: 6%;
}
.backend{
height: 100vh;
background-color: #E6E6E6;
text-align: center;
}
svg {
width: 15%;
display: inline-block;
margin: 0 1%;
}
.php {
width: 23%;
margin-bottom: 5%;
}
.mysql {
width: 23%;
margin-bottom: 7%;
}
.python {
width: 18%;
margin-bottom: 8%;
}
.html-css {
text-align: center;
}
.jquery-bootstrap {
text-align: center;
}
.col-sm-12 {
}
.nav-panel {
padding: 10% 30%;
margin-top: 10%;
}
.nav-panel li {
color: white;
text-transform: uppercase;
list-style-type: none;
padding: 20%;
border-bottom: solid 1px gray;
font-size: 1.2em;
}
.nav-panel li:hover {
color: gray;
}
.space {
position: relative;
left: 20px;
}
.active {
color: cyan;
font-weight: bold;
}
.active:hover {
color: cyan;
font-weight: bold;
}
.selected {
color: cyan;
font-weight: bold;
}
.selected:hover {
color: cyan;
font-weight: bold;
}
.nav-link {
font-family: Muli;
position: relative;
right: 15px;
}
/*
.nav-link:hover {
color: gray;
text-decoration: none;
} */
.menu-icon {
width: 30px;
margin: 1.2%;
padding: 0.05% 0.02%;
}
.menu-icon:hover {
background-color: rgba(86, 101, 115, 0.3);
border: none;
border-radius: 50%;
}
.hide-nav {
transform: translateX(-100%);
}
.expand-main {
width: 100%;
}
.shift-h1 {
margin-top: -1%;
}
.mobile-dropdown {
display: none;
}
.mobile-menu-icon {
display: none;
}
.copyright {
display: none;
color: dimgray;
}
/* MOBILE */
/* MEDIA QUERIES */
#media (min-width: 1000px) and (max-width: 1150px) {
.intro {
font-size: 1.2em;
}
.nav-link {
font-size: 0.8em;
}
h1 {
font-size: 1.9em;
}
}
#media (min-width: 800px) and (max-width: 1000px) {
.intro {
font-size: 1.1em;
}
.nav-link {
font-size: 0.9em;
}
h1 {
font-size: 1.8em;
}
}
#media (max-width: 800px) {
.intro {
font-size: 1em;
margin-left: 3%;
margin-right: 3%;
}
h1 {
font-size: 1.8em;
}
h3 {
font-size: 0.8em;
}
.nav-link {
font-size: 0.9em;
}
}
#media (max-width: 750px) {
.nav-bar {
}
.main {
}
.nav-link {
font-size: 0.8em;
}
}
#media (max-width: 700px) {
.bio-feature {
height: 40%;
}
}
#media (max-width: 600px) {
h1 {
font-size: 1.9em;
}
.heading {
position: relative;
top: 40px;
}
.main {
width: 100%;
}
.nav-bar {
display: none;
}
.menu-icon {
display: none;
}
.bio-feature {
/* height: 30%; */
margin: 0;
padding: 0;
}
.backend {
background-color: #E6E6E6;
}
body, html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
.mobile-background {
background-color: #4a235a;
}
.nav-bar {
display: none;
}
.main {
width: 100%;
}
.menu-icon {
display: none;
}
.mobile-menu-icon {
margin: 3% 5%;
width: 24px;
padding: 0;
float: right;
position: absolute;
top: 0;
right: 0;
}
.mobile-dropdown {
width: 100%;
margin: 0;
padding: 0;
}
.mobile-li {
width: 100%;
margin: 0px;
color: white;
background-color: #4a235a;
text-transform: uppercase;
list-style-type: none;
padding: 2%;
border-bottom: solid 2px gray;
font-size: 1em;
float: left;
}
.mobile-a {
font-family: Muli;
}
.mobile-a:hover {
text-decoration: none;
color: gray;
}
.active {
color: cyan;
}
.active:hover {
color: cyan;
}
.button:hover {
text-decoration: none;
}
.selected {
color: cyan;
font-weight: bold;
}
.selected:hover {
color: cyan;
font-weight: bold;
}
.contact {
border-bottom: none;
}
.expand {
height: 100%;
}
.mobile-menu-icon {
display: block;
}
.mobile-menu-icon:hover {
background-color: rgba(86, 101, 115, 0.1);
border: none;
border-radius: 50%;
}
.purple-background {
background-color: #4a235a;
}
}
#media (min-width: 0px) and (max-width: 600px) {
a {
color: gainsboro;
}
.bio-feature {
height: 42%;
}
}
#media (min-width: 500px) and (max-width: 600px) {
.heading {
position: relative;
top: 60px;
}
.intro {
font-size: 1.1em;
}
}
#media (max-width: 550px) {
.frontend, .backend {
height: 100%;
}
.frontend-text, .backend-text {
margin-bottom: 20px;
}
.copyright {
display: block;
font-size: 0.9em;
margin-top: 20px;
}
}
#media (max-width: 500px) {
.heading {
position: relative;
bottom: 30px;
}
}
#media (min-width: 400px) and (max-width: 500px) {
.intro {
margin: 0 8%;
}
}
#media (max-width: 400px) {
h1 {
font-size: 1.7em;
}
.bio-feature {
height: 43%;
}
}
#media (max-width: 310px) {
.intro {
font-size: 0.95em;
}
}
/* Add dropdown menu at 600px and down for this page */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gab's Tech Space</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel="stylesheet" href="gabsTechSpace_about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>
<body>
<div class="mobile-dropdown collapse-nav">
<ul>
<li class="mobile-li"><a class="mobile-a" href="gabsTechSpace_home.html">Home</a></li>
<li class="mobile-li"><a class="selected mobile-a" href="gabsTechSpace_about.html">About</a></li>
<li class="mobile-li"><a class="mobile-a" href="gabsTechSpace_projects.html">Projects</a></li>
<li class="mobile-li contact"><a class="mobile-a" href="gabsTechSpace_contact.html">Contact</a></li>
</ul>
</div>
<div class="main">
<div class="bio-feature">
<div class="heading">
<h1 class="text-center">Gabrielle Rutherford</h1>
<p class="intro text-center"><span id="first-line-intro">I'm a frontend developer working in the Houston Metro Area. </span><br> I often spend my free time delving deeper into the fascinating, yet incessant world of coding and design. And into pretty much anything else that stimulates my creative flair... I've realized that my destiny is to <strong>create things</strong> that will have an astounding impact on other people's lives.</p>
</div>
</div>
<div class="skills">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 frontend">
<h2 class="text-center">Frontend Skills</h2>
<div class="frontend-img">
<div class="row">
<div class="col-sm-12 html-css">
<svg class="html5" viewBox="0 0 128 128">
<path fill="#E44D26" d="M19.037 113.876l-10.005-112.215h109.936l-10.016 112.198-45.019 12.48z"></path><path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878h-44.937z"></path><path fill="#EBEBEB" d="M64 52.455h-18.212l-1.258-14.094h19.47v-13.762h-34.511l.33 3.692 3.382 37.927h30.799zM64 88.198l-.061.017-15.327-4.14-.979-10.975h-13.817l1.928 21.609 28.193 7.826.063-.017z"></path><path fill="#fff" d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zM63.952 24.599v13.762h33.244l.276-3.092.628-6.978.329-3.692z"></path>
</svg>
<svg class="css3" viewBox="0 0 128 128">
<path fill="#1572B6" d="M18.814 114.123l-10.054-112.771h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"></path><path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"></path><path fill="#fff" d="M64.001 51.429h18.302l1.264-14.163h-19.566v-13.831h34.681999999999995l-.332 3.711-3.4 38.114h-30.95v-13.831z"></path><path fill="#EBEBEB" d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031h-13.882l1.937 21.717 28.331 7.863.063-.018v-14.39z"></path><path fill="#fff" d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881h-13.876z"></path><path fill="#EBEBEB" d="M64.048 23.435v13.831000000000001h-33.407999999999994l-.277-3.108-.63-7.012-.331-3.711h34.646zM64.001 51.431v13.831000000000001h-15.209l-.277-3.108-.631-7.012-.33-3.711h16.447z"></path>
</svg>
</div>
</div>
<div class="row">
<div class="col-sm-12 jquery-bootstrap">
<svg class="jquery" viewBox="0 0 128 128">
<path fill="#0868AC" d="M9.625 32.181c-11.029 15.851-9.656 36.476-1.231 53.32.2.404.41.801.617 1.198l.394.759.246.437.439.786c.262.461.53.92.804 1.379l.459.756c.304.491.615.976.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05.228.308c.401.553.814 1.099 1.232 1.639l.464.59c.373.469.752.935 1.138 1.399l.435.52c.518.61 1.047 1.217 1.586 1.812l.033.033.061.068c.527.575 1.066 1.137 1.612 1.699l.517.521c.423.426.853.845 1.287 1.262l.527.5c.58.547 1.166 1.083 1.764 1.607l.028.022.307.262c.527.456 1.063.909 1.603 1.353l.664.529c.441.354.887.702 1.336 1.044l.714.543c.496.365.995.724 1.499 1.075l.546.387.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355c.565.326 1.134.646 1.71.959.312.168.632.327.946.488.407.213.811.429 1.225.636l.283.137.501.242c.641.306 1.287.607 1.94.897l.41.184c.748.327 1.502.641 2.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693 53.339 9.727 68.833-32.053 68.833-32.053-13.013 16.953-36.111 21.425-57.996 16.446-.829-.187-1.633-.446-2.442-.685l-.609-.185c-.79-.242-1.573-.497-2.352-.765l-.323-.117c-.698-.245-1.387-.504-2.074-.769l-.582-.229c-.752-.297-1.5-.607-2.239-.931l-.447-.198c-.635-.288-1.263-.578-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743-.324-.171-.654-.332-.975-.51-.592-.317-1.172-.646-1.751-.982l-.591-.33c-.769-.452-1.528-.921-2.28-1.397l-.615-.41c-.545-.351-1.088-.709-1.623-1.079l-.522-.367c-.516-.365-1.027-.734-1.534-1.109l-.679-.514c-.465-.355-.927-.713-1.384-1.082l-.617-.495c-.582-.479-1.156-.959-1.724-1.453l-.189-.159c-.614-.539-1.216-1.092-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509c-.543-.556-1.076-1.119-1.598-1.69l-.079-.084c-.552-.604-1.092-1.221-1.621-1.844l-.424-.504c-.394-.475-.785-.956-1.167-1.442l-.427-.532c-.459-.596-.908-1.189-1.347-1.794-12.15-16.574-16.516-39.432-6.805-58.204M43.862 18.825c-7.977 11.478-7.543 26.844-1.321 38.983 1.043 2.035 2.216 4.01 3.528 5.889 1.195 1.713 2.52 3.751 4.106 5.127.575.633 1.176 1.251 1.79 1.858l.472.465c.596.578 1.201 1.146 1.828 1.698l.074.064.018.018c.693.608 1.408 1.191 2.135 1.767l.485.378c.729.559 1.472 1.107 2.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319c.544.349 1.095.689 1.655 1.015l.235.136c.483.278.972.552 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672 41.183 6.823 50.691-24.886 50.691-24.886-8.57 12.343-25.168 18.233-42.879 13.635-.787-.207-1.562-.431-2.333-.674l-.701-.227c-.548-.177-1.092-.365-1.631-.562l-.736-.274c-.592-.228-1.176-.462-1.756-.708l-.473-.2c-.727-.316-1.443-.65-2.148-.999-.363-.177-.72-.364-1.078-.548l-.622-.32c-.458-.248-.914-.506-1.363-.77l-.326-.185c-.558-.325-1.107-.661-1.651-1.008l-.498-.332c-.359-.232-.717-.469-1.069-.707-.759-.524-1.498-1.072-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971-3.062-9.836-2.402-20.878 2.903-29.84M72.657 8.847c-4.702 6.92-5.164 15.514-1.901 23.156 3.441 8.113 10.491 14.476 18.72 17.495.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424 22.74 4.394 28.908-11.669 30.549-14.034-5.402 7.779-14.482 9.646-25.623 6.942-.88-.213-1.847-.531-2.695-.832-1.088-.388-2.16-.83-3.201-1.329-1.978-.951-3.864-2.104-5.612-3.424-9.969-7.565-16.162-21.994-9.657-33.745"></path>
</svg>
<svg class="bootstrap" viewBox="0 0 128 128">
<path fill="#5B4282" d="M75.701 65.603c-2.334-.768-5.694-.603-10.08-.603h-17.621v23h18.844c2.944 0 5.012-.315 6.203-.535 2.099-.376 3.854-1.104 5.264-1.982 1.409-.876 2.568-2.205 3.478-3.881.908-1.676 1.363-3.637 1.363-5.83 0-2.568-.658-4.54-1.975-6.436-1.316-1.896-3.141-2.965-5.476-3.733zM73.282 55.087c2.317-.688 4.064-1.89 5.239-3.487 1.176-1.598 1.763-3.631 1.763-6.044 0-2.286-.549-4.314-1.646-6.054s-2.662-2.413-4.699-3.056c-2.037-.641-5.53-.446-10.48-.446h-15.459v20h16.587c4.042 0 6.939-.38 8.695-.913zM126 18.625c0-9.182-7.443-16.625-16.625-16.625h-91.75c-9.182 0-16.625 7.443-16.625 16.625v91.75c0 9.182 7.443 16.625 16.625 16.625h91.75c9.182 0 16.625-7.443 16.625-16.625v-91.75zm-35.447 66.12c-1.362 2.773-3.047 4.911-5.052 6.415-2.006 1.504-4.521 2.78-7.544 3.548-3.022.769-6.728 1.292-11.113 1.292h-27.844v-69h27.42c5.264 0 9.485.609 12.665 2.002 3.181 1.395 5.671 3.497 7.474 6.395 1.801 2.898 2.702 5.907 2.702 9.071 0 2.945-.8 5.708-2.397 8.308-1.598 2.602-4.011 4.694-7.237 6.292 4.166 1.222 7.37 3.304 9.61 6.248 2.24 2.945 3.36 6.422 3.36 10.432 0 3.227-.681 6.225-2.044 8.997z"></path>
</svg>
</div>
</div>
</div>
<h6 class="text-center">HTML5 - CSS3 - JQuery - Bootstrap 4</h6>
<p class="frontend-text">From the design process to initiaton and launch, I love utilizing the newest frontend technologies to construct beautiful, functional, and responsive interfaces. <span class="highlighted-text">HTML5</span>, <span class="highlighted-text">CSS3</span>, <span class="highlighted-text">Bootstrap 4</span> and <span class="highlighted-text">JQuery</span> are all used in most of my frontend projects. In fact, they were all incorporated to build this site. </p>
<br>
<br>
</div>
<div class="col-sm-6 col-xs-12 backend">
<h2 class="text-center">Backend Skills</h2>
<svg class="mysql" viewBox="0 0 128 128">
<path fill="#00618A" d="M2.001 90.458h4.108v-16.223l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108v-16.196c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976-1.304.395-1.936 1.159-1.936 2.739v16.197zM33.899 77.252h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0v-10.643h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417h-12.972v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z"></path><path fill="#E48E00" d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738h-11.535c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816.237.237.315.475.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026h-11.338v2.738zM100.511 85.692c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706v-2.738h-10.784c-2.41 0-3.318-.606-3.318-2.055v-14.168h-4.108v14.195zM77.503 85.834v-9.765c0-2.48 1.742-3.985 5.186-4.46.356-.053.753-.079 1.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395c-.752 0-1.543-.105-2.414-.343-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z"></path><path fill="#00618A" d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441-.9-1.735-1.786-3.631-2.585-5.458-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437-.427-.579-.854-1.341-1.149-2.011-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593c-.526-.01-.899.058-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z"></path>
</svg>
<svg class="php" viewBox="0 0 128 128">
<path fill="#6181B6" d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"></path>
</svg>
<svg class="python" viewBox="0 0 128 128">
<path fill="#FFD845" d="M49.33 62h29.159c8.117 0 14.511-6.868 14.511-15.019v-27.798c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191-12.355 2.181-14.453 6.751-14.453 15.176v10.817h29v4h-40.224000000000004c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53 2.075 8.642 7.03 14.659 15.515 14.659h9.946v-13.048c0-9.637 8.428-17.952 18.33-17.952zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zM122.281 48.811c-2.098-8.448-6.103-14.811-14.599-14.811h-10.682v12.981c0 10.05-8.794 18.019-18.511 18.019h-29.159c-7.988 0-14.33 7.326-14.33 15.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0 7.349-2.129 14.487-6.411 14.487-14.834v-11.126h-29v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"></path>
</svg>
<h6 class="text-center">SQL - PHP - Python</h6>
<p class="backend-text">For both web development and application development projects in the future, I've been trying my hand at the <span class="highlighted-text2">Python</span> programming language. I'm also picking up <span class="highlighted-text2">SQL</span> to become comfortable with database management. <span class="highlighted-text2">PHP</span> was utilized for the contact form on this site.</p>
<!--
<h2 class="text-center" id="additional-skills">Additional Skills</h2>
-->
<br>
<br>
<br>
<br>
<br>
<p class="copyright">© 2017 Gabby Rutherford</p>
</div>
</div>
</div>
</div>
</div>
<div class="nav-bar">
<h3>Gab's Tech <br><span class="space">Space</span></h3>
<ul class="nav-panel text-center">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="gabsTechSpace_about.js"></script>
</body>
</html>

You can use viewport units, vh, which are percentage of device height. If you want the upper part to never be cut off set it's heght to auto but you can't have both fit the screen if there is too much content.
Put a media query to set smaller font size on short screens if you think you can fit your content that way, like this
#media (max-height: 600px) {
.box {
font-size: 0.75rem;
}
}

Text isn't minimizing with screen HTML/CSS

I hope someone can help! When I minimize the browser screen on this code, everything is minimizing appropriately except for my body text. Not sure why this is happening! Can anybody find the issue in the HTML or CSS?
The HTML:
<!DOCTYPE html>
<!--
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>History: Skating Today</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="" name="description">
<meta content="" name="keywords">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="js/skel.min.js">
</script>
<script src="js/skel-panels.min.js">
</script>
<script src="js/init.js">
</script> <noscript>
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.header {
}
</style></noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="page">
<!-- Header -->
<div id="page">
<img alt="Black and white photo of boy skateboarding" height="" src=
"images/OldTimey.jpg" width="100%">
<div class="unit header">
<section>
<header>
<h3>Unit 1: Skateboarding, Then and Now<br>
Lesson 1/3</h3>
</header>
</section>
</div><!-- Main -->
<div class="container" id="main">
<div class="row">
<div class="3u">
<section class="sidebar">
<h4>Home</h4>
</section>
<section class="sidebar">
<h4><a href="Programme%20Overview.html">Programme
Overview</a></h4>
</section>
<section class="sidebar">
<h4><a href="Unit1.html">Unit 1: Skateboarding, Then
and Now</a></h4>
<ul class="style3">
<li><a href="History.html">Lesson 1: History of
Skateboarding</a></li>
<li><a href="Types.html">Lesson 2: Types of
Skating</a></li>
<li>Unit 1 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4><a href="Unit2.html">Unit 2: Why You Should
Skate</a></h4>
<ul class="style3">
<li><a href="EmotionalBenefits.html">Lesson 1:
Emotional and Physical Benefits</a></li>
<li><a href="SocialBenefits.html">Lesson 2: Social
and Enviromental Benefits (Plus a Few
More!)</a></li>
<li>Unit 2 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4>Unit 3: Safety & Upkeep</h4>
<ul class="style3">
<li><a href="SafePlace.html">Lesson 1: Determining Safe Places
to Skate</a></li>
<li><a href="Stopping.html">Lesson 2: How to Stop a
Board</a></li>
<li><a href="Rules.html">Lesson 3: Rules of the
Road</a></li>
<li>Lesson 4: Changing Your Bearings</li>
<li>Lesson 5: Adjusting Your Trucks</li>
</ul>
</section>
<section class="sidebar">
<h4>Extras: Skating Routes & Meet a Skater</h4>
<ul class="style3">
<li>From the Flag Poles</li>
<li>From the White Gates</li>
<li>From the Pavilion</li>
<li>Meet a Skater</li>
</ul>
</section>
</div>
<div class= "9u skel-cell-important"">
<header>
<h3>Skating Today</h3>
</header>
<p> While some people may still see skaters as
rebellious or alternative, skateboarding has once
again evolved. In places like Afghanistan, where
girls are not allowed to ride bikes but can
skateboard, the sport is used to engage and empower
youth (skateistan.org). Furthermore, although many
skaters still take part in skateboarding to perfect
tricks and take risks, skateboarding has become the
way that many people get from point A to point B.</p>
<p></p>
<p>While any type of skateboard may be used for
transportation, the longboard is having its heyday.
A longboard can range anywhere from 33 to 80 inches
and typically has softer wheels, making for a
smoother and more stable ride, perfect for
cruising, less experienced, and older skaters
(Ruibal 2006).</p>
<img src="images/header.jpg" width="736" height="189" alt=""/><br>
<div id="course description">
<br>
<p>This lesson is now complete. To continue to lesson 2, "Types of Skating", click <a href=
"Types.html">next</a>.</p>
</div>
</div>
</section>
</div><!-- Main -->
</div>
</div>
</div>
</body>
</html>
And the CSS:
#charset "UTF-8";
/*
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body {
background-image: url(../images/BackgroundImage.jpg);
}
body,input,textarea,select {
font-family: Verdana,Geneva,sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.5em;
}
h1,h2,h3,h4,h5,h6 {
letter-spacing: 1px;
font-weight: 300;
color: #1b1b5e;
}
h4
{
letter-spacing: 1px;
font-weight: 700;
color: #1b1b5e;
}
/* Change this to whatever font weight/color pairing is most suitable */
strong,b {
font-weight: 700;
color: #000;
}
em,i {
font-style: italic;
}
/* Don't forget to set this to something that matches the design */
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sub {
position: relative;
top: .5em;
font-size: .8em;
}
sup {
position: relative;
top: -.5em;
font-size: .8em;
}
hr {
border: 0;
border-top: solid 1px #ddd;
}
blockquote {
border-left: solid .5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
p,ul,ol,dl,table {
margin-right: ;
margin-bottom: 1em;
color: #1b1b5e;
}
tr. highlight td {
padding: 2em;
}
header {
margin-bottom: .5em;
line-height: 2.5em;
color: #1b1b5e;
}
header h2 {
font-size: 24px;
text-align: left;
}
header h3 {
font-size: 22px;
}
footer {
margin-top: 1em;
}
/* Sections/Articles */
section,article {
margin-bottom: 1em;
}
.row
{
padding: 0;
position; center;
}
.intro {
text-align: left;
padding-bottom: 2em;
font-weight: 700;
}
.aims {
padding-top: 2px;
}
.unit header {
text-align: right;
margin-right: 1em;
color: purple;
}
table,th,td {
border: ;
border-collapse: collapse;
align-content: center;
}
th,td {
padding: 5px;
}
.boxed {
border: 1px solid #000;
padding: 2%;
margin-right: 10%;
margin-bottom: 2em;
}
* {
margin: 0;
padding: 0;
outline: none;
}
.formativequiz {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background: ;
text-align: left;
}
.formativequiz h1 {
font: bold;
}
.formativequiz p {
font: bold;
}
.question {
overflow: auto;
margin: ;
width: 80%;
background: #fff;
}
.question h2 {
float: left;
margin: 0 40px;
color: blue;
font: bold;
}
.question h2:hover {
color: #333;
cursor: pointer;
}
.question p {
float: left;
margin-right: 0;
color: #fff;
font: bold 0;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
h2:active ~ .yes {
color: #1b1b5e;
font-size: ;
}
.course description {
margin-bottom: 3em;
padding-right: 10%;
}
#icons {
height: 128;
text-align: justify;
border: none;
font-size: .1px;
/* IE 9 & 10 don't like font-size: 0; */
max-width: 888px;
}
#icons div {
display: inline-block;
margin-top: 3em;
margin-bottom: 3em;
padding-right: 10%;
}
#icons:after {
content: '';
width: 100%;
/* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
/* Images */
.image {
display: block;
margin: 2em;
}
.image img {
display: block ;
width: ;
margin: 2em;
padding: 2em;
}
.image.featured {
display: block;
width: 100%;
margin: 0;
}
.image.full {
display: block;
width: 100%;
margin-bottom: 2em;
}
.image.left {
float: left;
margin: 0 2em .8em 0;
}
.image.centered {
display: block;
margin: 0 0 .8em;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default {
margin-bottom: 0;
padding-bottom: 0;
list-style: none;
}
ul.default li {
display: block;
padding: 2em 0 1.25em;
border-top: 1px solid #303030;
}
ul.default li:first-child {
padding-top: 0;
border-top: none;
}
ul.default a {
text-decoration: none;
color: rgba(255,255,255,.5);
}
ul.default a:hover {
}
ul.style1 {
margin: 0;
padding: 0;
list-style: none;
}
ul.style1 li {
padding: .6em 0;
}
ul.style1 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style1 img {
}
ul.style2 {
text-align: left;
margin-right: 10%;
padding: 2%;
list-style: disc;
padding-bottom: 1em;
}
ul.style2 li {
padding: .5em 0 0;
list-style-position: inside;
}
ul.style2 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style3 {
margin: 0;
padding: 5px;
list-style: none;
font: 14px;
}
ul.style3 li {
padding-left: .6em;
line-height: 150%;
}
ul.style3 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style5 {
overflow: hidden;
margin: 0 0 1em;
padding: 0;
list-style: none;
}
ul.style5 li {
float: left;
padding: .25em;
line-height: 0;
}
ul.style5 a {
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page {
margin: 7em;
position: center;
background: #fff;
}
#main {
padding: 1em;
}
#container {
position: center;
margin: 1em;
padding: 1em;
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.greenleaf {
align-content: relative;
}
.trafficlight {
align-content: relative;
}
.pinkskater {
}
.map {
}

Add media queries to your CSS to define you font sizes for various window sizes. Here's a simple example from this post (written in Sass):
html {
font-size: 16px;
#media (min-width: 800px) {
font-size: 18px;
}
#media (min-width: 1200px) {
font-size: 20px;
}
}

The problem appears to be that in your css you set the font size of body in pixels. try changing it to em instead of px and it should adjust in size. But it's hard to tell with so much going on.