Bootstrap, text doesn't align well when on mobile
Question
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/bootstrap@5.1.3/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 class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active nav-link-custom-1 nav-item-spacing" href="#">Home</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Curriculum</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Portfolio</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Contatti</a>
<!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-custom-2 nav-item-spacing" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Language
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item nav-link-custom-2" href="#">
<span></span>
Italiano</a>
<a class="dropdown-item nav-link-custom-2" href="#">
<span></span>
English</a>
</div>
</li>-->
</div>
<!--Dropdown item end-->
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section class="screen-height">
<div class="container-fluid h-100 d-inline-block">
<div class="top-logo"></div>
<div class="row d-flex justify-content-center align-items-center" id="animation">
<div class="col-4">
<img src="svg/index-svg/Home-LOGO-SVG-01.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section class="container-fluid background-black screen-height">
<!--SPACING 1-->
<div class="row">
<div class="cur-buffer-top col-1"></div>
</div>
<!--TEXT 1-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Sono un designer</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 2-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 3-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho lavoro a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="cur-buffer-mid 1 col-1"></div>
</div>
<!--TEXT 4-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="cur-buffer-mid">
</div>
</div>
<!--BUTTONS-->
<div class="row container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn btn btn-dark w-100">Online<br>portfolio</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn btn btn-dark w-100">Portfolio<br>PDF version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Title-->
<div class="row d-flex">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Work</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Pastichair/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Pastichair</h2>
</div>
<div class="col-4"></div>
</div>
<!--Pastichair/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">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 class="col-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Beb/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Bella e brava</h2>
</div>
<div class="col-4"></div>
</div>
<!--beb/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">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 class="col-2"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Personal space/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Personal space</h2>
</div>
<div class="col-4"></div>
</div>
<!--Personal space/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">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 class="col-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="work-buffer">
</div>
</div>
<!--BUTTONS-->
<div class="row container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Portfolio<br>PDF version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Info</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="info-buffer">
</div>
</div>
<!--Info wrap-->
<div class="row mb-5">
<!--DATA-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 col-sm-1 col-md-4"></div>
<div class="col-8 container-fluid">
<div class="row">
<div class="col-12 txt-center txt-justify">
<h3 class="info-text-title">Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div class="row">
<div class="col-6 txt-left">
<p class="info-text-red">Nazionalità</p>
</div>
<div class="col-6 txt-right">
<p class="info-text-normal">Italiana</p>
</div>
</div>
<div class="row">
<div class="col-6 txt-left">
<p class="info-text-red">Data di nascita</p>
</div>
<div class="col-6 txt-right">
<p class="info-text-normal">08/04/2000</p>
</div>
</div>
<div class="row">
<div class="col-6 txt-left">
<p class="info-text-red">Luogo di nascita</p>
</div>
<div class="col-6 txt-right">
<p class="info-text-normal">Caserta</p>
</div>
</div>
<div class="row">
<div class="col-4 txt-left">
<p class="info-text-red">Email</p>
</div>
<div class="col-8 txt-right">
<p class="info-text-normal">emailexemple@gmail</p>
</div>
</div>
<div class="row">
<div class="col-6 txt-left">
<p class="info-text-red">Telefono</p>
</div>
<div class="col-6 txt-right">
<p class="info-text-normal">0000000000</p>
</div>
</div>
</div>
<div class="col-1 col-sm-1 col-md-0"></div>
</div>
</div>
<!--BUTTON-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<a href="#" class="link-btn-light btn btn-light w-100">Full contacts<br>and info</a>
</div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger" style="width: 100%"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Home<br>page</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Online<br>curriculum</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="#" class="link-btn-light btn btn-light w-100">Full contacts<br>and info</a>
</div>
<div class="col-2 col-md-3"></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/popper.js@1.16.0/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 -------------------------------------------------------------------------------------------------------------*/
1 answers
solution1
0 2022-01-17 05:36:03
remove height: 100vh; from
.screen-height {
height: 100vh;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap toggle doesn't display well when added dynamically
AngularJS ng-repeat elements don't align well when using Bootstrap col-md-2
Canvas doesn't work well with bootstrap
CSS <div> doesn't align the text to the left even when there is space
Bootstrap Carousel image doesn't align properly
Angular: Flex doesn't work well on mobile (IOS 13)
jQuery Mobile: selecting by ID doesn't work well
Bootstrap dropdown doesn't work on mobile
Bootstrap 5 - Mobile Menu doesn't open
Bootstrap navbar-Single item doesn't show up when on mobile
Related Tags