There is some margin to the right of the page, seemingly outside of the body itself (seen from inspecting in browser), which also causes a scrolling bar to appear on the bottom, but i can't understand what causes it.
I linked on both codepen and netlify
Codepen:
https://codepen.io/bladeranner5005/pen/QWObNpZ
Netlify:
https://lucid-kalam-398350.netlify.app
html
<!doctype html>
<html lang="it">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<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=Josefin Sans:wght@300;400&family=Libre Franklin:wght@800&display=swap"
rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Icons links-->
<!--Custom css-->
<link href="css/index-css.css" rel="stylesheet">
<title>Andrea D'Angelo-website</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav >
<button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNavAltMarkup">
<div >
<a href="index.html">Home</a>
<a href="pages/curriculum.html">Curriculum</a>
<a href="pages/portfolio.html">Portfolio</a>
<a href="pages/contacts.html">Contatti</a>
</div>
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section >
<div >
<div ></div>
<div id="animation">
<div >
<img src="img/index/home-logo.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section >
<div >
<!--SPACING 1-->
<div >
<div ></div>
</div>
<!--TEXT 1-->
<div >
<div ></div>
<div >
<h2>Sono un designer</h2>
</div>
<div ></div>
</div>
<!--SPACING 2-->
<div >
<div >
</div>
</div>
<!--TEXT 2-->
<div >
<div ></div>
<div >
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div ></div>
</div>
<!--SPACING 3-->
<div >
<div >
</div>
</div>
<!--TEXT 3-->
<div >
<div ></div>
<div >
<h2>Ho lavorato a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div ></div>
</div>
<!--SPACING 4-->
<div >
<div ></div>
</div>
<!--TEXT 4-->
<div >
<div ></div>
<div >
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div ></div>
</div>
<!--SPACING 5-->
<div >
<div >
</div>
</div>
</div>
<!--BUTTONS (DARK BACKGROUND)-->
<div >
<div >
<div >
<div >
<div >
<div ></div>
<div >
<a href="pages/curriculum.html" >Online<br>curriculum</a>
</div>
<div ></div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ></div>
<div >
<a href="pdf/curriculum-pdf.pdf" >Curriculum<br>PDF
version</a>
</div>
<div ></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section>
<div >
<!--SPACING 1-->
<div >
<div ></div>
</div>
<!--Title-->
<div >
<div ></div>
<div >
<h1 >My work</h1>
</div>
<div ></div>
</div>
<!--SPACING 2-->
<div >
<div ></div>
</div>
<!--Pastichair/red-->
<div >
<div ></div>
<div >
<h2 >Pastichair</h2>
</div>
<div ></div>
</div>
<!--Pastichair/text-->
<div >
<div ></div>
<div >
<p >Lavoro di design di scenario in cui abbiamo interagito con la
cooperativa torinese Triciclo, dovendo proporre nuovi scenari per migliorare le prestazioni
della cooperativa sia creare un nuovo modello di prodotto che facilmente replicabile dai membri
di Triciclo, in particolare concentrandosi su un tipo di sedia assegnata a inizio progetto.</p>
</div>
<div ></div>
</div>
<!--SPACING 3-->
<div >
<div ></div>
</div>
<!--Beb/red-->
<div >
<div ></div>
<div >
<h2 >Bella e brava</h2>
</div>
<div ></div>
</div>
<!--beb/text-->
<div >
<div ></div>
<div >
<p >Progetto di creazione di un video animato di 45 secondi avente come
protagonista un prodotto di packaging pre selezionato, tramite lo strumento video e le tecniche
di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione,
con l’evidenza dei particolari motivi dell’essere ecologicamente sostenibile.</p>
</div>
<div ></div>
</div>
<!--SPACING 4-->
<div >
<div ></div>
</div>
<!--Personal space/red-->
<div >
<div ></div>
<div >
<h2 >Personal space</h2>
</div>
<div ></div>
</div>
<!--Personal space/text-->
<div >
<div ></div>
<div >
<p >Un progetto di social design, ci è stato dato il compito di creare un
ipotetico progetto riguardante un tema sociale circoscritto a Torino. Abbiamo deciso di
dedicarci al tema delle neuro divergenze nelle scuole, in particolare l’autismo. Abbiamo creato
un’attività la quale punta a facilitare l’interazione fra bambini neuro divergenti e non, la
quale poi si sarebbe sviluppata con un’interazione online con i genitori.</p>
</div>
<div ></div>
</div>
<!--SPACING 5-->
<div >
<div >
</div>
</div>
</div>
<!--BUTTONS-->
<div >
<div >
<div >
<div >
<div >
<div ></div>
<div >
<a href="pages/portfolio.html" >Online<br>portfolio</a>
</div>
<div ></div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ></div>
<div >
<a href="pdf/portfolio-pdf.pdf" >Portfolio<br>PDF
version</a>
</div>
<div ></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div >
<div >
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section >
<!--Title-->
<div >
<div ></div>
<div >
<h1 >Info</h1>
</div>
<div ></div>
</div>
<!--SPACING 2-->
<div >
<div >
</div>
</div>
<!--Info wrap-->
<div >
<!--DATA-->
<div >
<div >
<div >
<div ></div>
<div >
<div >
<div >
<div >
<h3 >Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div >
<div >
<p >Nazionalità</p>
</div>
<div >
<p >Italiana</p>
</div>
</div>
<div >
<div >
<p >Data di nascita</p>
</div>
<div >
<p >08/04/2000</p>
</div>
</div>
<div >
<div >
<p >Luogo di nascita</p>
</div>
<div >
<p >Caserta</p>
</div>
</div>
<div >
<div >
<p >Email</p>
</div>
<div >
<p >emailexemple@gmail</p>
</div>
</div>
<div >
<div >
<p >Telefono</p>
</div>
<div >
<p >0000000000</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--BUTTON-->
<div >
<div >
<div ></div>
</div>
<div >
<div ></div>
<div >
<a href="pages/contacts.html" >Full contacts<br>and
info</a>
</div>
<div ></div>
</div>
<div >
<div ></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div ></div>
<!--Start container-->
<footer >
<!--ROW 1-->
<div >
<!--ROW 1-A-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="index.html" >Home<br>page</a>
</div>
<div ></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="pages/curriculum.html" >Online<br>curriculum</a>
</div>
<div ></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div >
<!--ROW 2-A-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="pages/portfolio.html" >Online<br>portfolio</a>
</div>
<div ></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="pages/contacts.html" >Full contacts<br>and
info</a>
</div>
<div ></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
</body>
</html>
CSS
/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/
/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
padding-top: 55px;
margin: 0;
}
/*To make internal links selection better:*/
html {
scroll-behavior: smooth;
}
/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/
/*Tags from google fonts
Josefin sans light:
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
Josefin sans regular:
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/
/*NAVBAR -------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.nav-item-spacing {
margin-left: 30px;
margin-right: 30px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Colors --*/
.background-black {
background-color: black;
}
.nav-link-custom {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
font-size: 1vw;
}
/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height {
height: 100vh;
}
.top-logo {
height: 13vh;
}
@media (max-width: 768px) {
.top-logo {
height: 30vh;
}
}
#animation {
animation: animation 2s;
}
@keyframes animation {
from {
transform: translateY(60vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height-curriculum {
height: 100vh;
}
@media (max-width: 768px) {
.screen-height-curriculum {
height: 110vh;
}
}
.cur-buffer-mid {
height: 10vh;
}
@media (max-width: 768px) {
.cur-buffer-mid {
height: 6vh;
}
}
.cur-buffer-top {
height: 8vh;
}
/*Text --*/
.home-cur-text {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: white;
text-align: center;
}
/*Button --*/
.link-btn {
border-style: solid;
border-width: thick;
border-color: white;
background-color: black;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*MY WORK ------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.work-buffer {
height: 10vh;
}
/*Text --*/
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 36pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
@media (max-width: 768px) {
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 42pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 18pt;
}
}
/*Button --*/
.link-btn-light {
border-style: solid;
border-width: thick;
border-color: black;
background-color: white;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*INFO ---------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.info-buffer {
height: 10vh;
}
.info-buffer-button {
height: 15vh;
}
/*Text --*/
/*
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
*/
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 36pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
@media (max-width: 768px) {
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 18pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 3vmin;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 4vmin;
}
}
CodePudding user response：
I'm not finding the culprit immediately after checking your codepen, but a quick and dirty way to hide any side to side scrolling is by using
body {
overflow-x: hidden;
}
CodePudding user response：
It's caused by the margins of your middle logo, #animation. Setting --bs-gutter-x to 0 seems to fix it.
CodePudding user response：
fix this in grid:
.row {
--bs-gutter-x: 0;
}
or add this style:
body {
width: 100vw;
overflow-x: hidden;
}
CodePudding user response：
It looks like it's an issue with the div under the <!--SPACING 6--> comment in the My Work section. Remove from this div, and this'll fix the issue. Here's an example:
<!--SPACING 6-->
<div>
<div >
</div>
</div>
I also noticed that the work-buffer class is only added for spacing. A better way of doing this would be to get rid of this div all together and add padding-bottom to the <section> tag containing the "My Work" content instead.