I'm doing a page that is supposed to be a portfolio site for my design work in university, I have text that is aligned in the center, patriculary in the "my work" section, but when I reduce the window width it seems to misalign compared to everything else like the buttons, what am I missing?
Codepen:
https://codepen.io/bladeranner5005/pen/YzrgZeo
html code:
<!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-portfolio</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav >
<a href="#"></a>
<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="#">Home</a>
<a href="#">Curriculum</a>
<a href="#">Portfolio</a>
<a href="#">Contatti</a>
<!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->
<!--<li >
<a href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Language
</a>
<div aria-labelledby="navbarDropdown">
<a href="#">
<span></span>
Italiano</a>
<a href="#">
<span></span>
English</a>
</div>
</li>-->
</div>
<!--Dropdown item end-->
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section >
<div >
<div ></div>
<div id="animation">
<div >
<img src="svg/index-svg/Home-LOGO-SVG-01.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section >
<!--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 lavoro 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>
<!--BUTTONS-->
<div >
<div >
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >Online<br>portfolio</a>
</div>
<div ></div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >Portfolio<br>PDF version</a>
</div>
<div ></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section >
<!--SPACING 1-->
<div >
<div ></div>
</div>
<!--Title-->
<div >
<div ></div>
<div >
<h1 >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 avendo come protagonista un prodotto di packaging pre selezionato, attraverso lo strumento video e con le tecniche di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione, rendendo in particolare i motivi per cui è ecologicametne 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>
<!--BUTTONS-->
<div >
<div >
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >Online<br>portfolio</a>
</div>
<div ></div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >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 >
<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="#" >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 style="width: 100%"></div>
<!--Start container-->
<footer >
<!--ROW 1-->
<div >
<!--ROW 1-A-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >Home<br>page</a>
</div>
<div ></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >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="#" >Online<br>portfolio</a>
</div>
<div ></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div >
<div >
<div >
<div ></div>
<div >
<a href="#" >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 code:
/*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: 60px;
}
/*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: black;
}
.nav-link-custom-1 {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
.nav-link-custom-2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}
/*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 {
height: 100vh;
}
*/
.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;
}
}
/*Align text*/
.txt-center {
text-align: center;
}
.txt-left {
text-align: left;
}
.txt-right {
text-align: right;
}
.txt-justify {
text-align: justify;
}
/*FOOTER -------------------------------------------------------------------------------------------------------------*/
CodePudding user response：
remove height: 100vh; from
.screen-height {
height: 100vh;
}