I’m a frontend newbie and I’m having an issue with the responsiveness of a website I’ve created. I’m using Bootstrap 5. In the desktop view, everything is well aligned, but in the mobile view, the text isn’t aligning with the logo properly.
I’ve attached screenshots to show the issue:
Here’s a snippet of my HTML and CSS code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
<style>
body {
font-family: 'Quicksand';
background-image: url('aqua.jpg');
background-size: cover;
background-repeat:no-repeat;
}
</style>
<title>🌊 Surf Mind & Fitness 🌊</title>
</head>
<body>
<div class="px-4 py-5 my-5 text-center container-fluid">
<img class="d-block mx-auto mb-4" src="/logo.svg" alt="Surf Mind & Fitness" width="450" height="275" style="object-fit: cover; fill: none;">
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Nous sommes une association basée à Brest dédiée à la préparation physique pour le surf. Nous proposons des entraînements fonctionnels spécialisés en piscine pour aider les surfeurs de tous niveaux à renforcer leur endurance et leur technique.</p>
<p class="lead mb-4">Rejoignez-nous sur notre <a href="https://www.facebook.com/profile.php?id=61559800165819">Facebook</a> pour rester informé(e) de nos activités, événements et opportunités d'entraînement à venir.</p>
<p class="lead mb-4">Pour plus de renseignements, contactez-nous à <a href="mailto:@[email protected]">[email protected]</a>.</p>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I’ve tried different Bootstrap classes and custom CSS, but I can’t seem to get it right. Could someone point out what might be causing the misalignment in the mobile view and suggest the best practices to fix this kind of issue?
Thanks in advance for your help!