How can I align some elements in the mobile version of my website?
Question
i would like to know how is possibile to align some elemtents with Bootstrap, in order to have a more clean look for the mobile/ipad version of my website. The "01.1 Fake News" and the paragraph under it should have a margin-left that is the same of the images under it, same for "01.2 Wittgenstein Posters". I'm adding an image of the website in order for you to see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="icone/favicon_32x32.png" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
<title>Giulia Giordano
</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-lg-4 mt-sm-0 mt-md-4 mt-xl-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
<a href="index.html" class="nav-link text-dark">home</a>
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
<a href="chisono.html" class="nav-link text-dark ">chi sono?</a>
</li>
<li class="nav-item mr-1">
<a href="contattami.html" class="nav-link text-dark">contattami</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md d-none d-lg-block d-xl-block fullScreen">
<img src="img/gd_graphicdesigngenerale.gif" class="fullScreen" alt="">
</div>
<div class="col-md d-flex align-items-center vertical-container justify-content-center fullScreen">
<div class="row mt-5">
<div class="offset-2 mt-15"></div>
<h2 class=" text-purple mt-5 mt-15">01</h2>
<div class="offset-1"></div>
<h2 class=" text-purple ml-3 mt-5 ">graphic <br>design</h2>
<div class="d-flex offset-3 vertical-container align-items-center">
<p class="col-9 display-5 mt-5 ml-3 mb-5 mr-6">Qui puoi trovare una selezione dei miei progetti di graphic design. La monografia di Armin Hofmann, grafico pioniero dello Swiss Design, e i cinque poster di tipografia espressiva realizzati per gli aforismi di Ludwig Wittgenstein. Tutti questi lavori sono stati eseguiti all'Accademia di Belle Arti di Palermo.</p>
</div>
<div class="offset-4">
</div>
</div>
</div>
</div>
<div class="row purple-white-section2" >
<div class="col-lg">
<div class="d-flex vertical-container align-items-center">
<div class="justify-content-start col-sm-8">
<h3 class="mt-5 mb-4">01.1</h3>
<h3 class="font-weight-lighter mt-5">How to Fight <br> Fake News</h3>
<p class=" display-5 mt-5">È possibile sconfiggere le fake
news? Perché è così difficile
riconoscerle e scovarle? Qual è
stata la prima bufala della storia? Alcune delle domande a cui questo
manuale risponde, una guida per
sconfiggere le notizie false.</p>
<a href="fakenews.html"><img src="scopridipiu/scopridipiu.png" alt="" class="mt-5"></a>
</div>
</div>
</div>
<div class="col-lg d-flex vertical-container align-items-center"><img
src="photoshop/graphicdesign_generale/img/fakenews_generale_2.jpg" class="img-fluid p-4 mt-4" alt=""><img
src="photoshop/graphicdesign_generale/img/fakenews_generale_3.jpg" class="img-fluid p-4 mt-4" alt="">
</div>
</div>
<div class="row">
<div class="col-lg d-flex align-items-center">
<img src="photoshop/graphicdesign_generale/img/black.png" width="50%" alt="">
<img src="photoshop/graphicdesign_generale/img/viola.png" class="mt-5" width="50%" alt="">
</div>
<div class="col-lg order-first order-lg-0 d-flex vertical-container align-items-center mt-4">
<div class="justify-content-start col-sm-8">
<h3 class="mt-5 mb-4 text-purple">01.2</h3>
<h3 class="font-weight-lighter mt-5">Wittengstein <br> poster</h3>
<p class="display-5 mt-5">Esercizio di tipografia espressiva.
Quattro aforismi del famoso
filosofo Ludwig Wittengstein
spiegati attraverso la tipografia e
il colore. Lavoro realizzto durante
il mo primo anno all’Accademia di
Belle Arti di Palermo.
</p>
<a href="wittengstein.html"><img src="scopridipiu/scopridipiu_viola.png" alt="" class="mt-5"></a>
</div>
</div>
</div>
<footer>
<div class="row p-4">
<div class="mr-auto mt-2 ml-4 text-purple">
<h6>© All rights reserved to Giulia Giordano
</h6>
</div>
<div class="ml-auto mr-4">
<a class="mr-3" href="https://www.instagram.com/grappaiulia/">
<img alt="instagram" src="icone/instagram.png" title="instagram" width="20"></a>
<a class="mr-3"
href="https://www.behance.net/giulia_giordano?tracking_source=search_users_recommended%7Cgiulia%20giordano"
target="_blank">
<img alt="behance" src="icone/behance.png" title="behance" width="20">
</a>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
1 answers
solution1
1 2020-09-17 21:32:51
You have the main title (graphic design) and the sub titles (01 and 02) within different structure and styling classes. Since these different tags and classes have different css styles, you will see - well- a difference.
Also, it's very much possible you are stacking margin styles for your sub titles. Meaning that your subs are experiences margin for themselves, but also the margin from their parent elements.
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
how can I align my WordPress website for mobile
How can I align my elements in HTML?
How I can make mobile version of my website which will work in android , iphone,ipad?
How can I align these list elements with some buttons?
How can i redirect to AMP version of website on mobile?
How can I align items on my website footer
How can I get my elements to align properly?
How I can check my website work in Safari mobile?
How can I add hamburger to my website's mobile view
How can I make my website not drag on mobile devices?
Related Tags