Html Question posted in
Some basic documentation can be found here.

Html – How to Align Text with Logo in Mobile View Using Bootstrap 5?

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:

desktop view
mobile view

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?

<head>
  <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>
</head>

<body>
  <div class="px-4 py-5 my-5 text-center container-fluid">
    <img class="d-block mx-auto mb-4" src="https://via.placeholder.com/500x200" 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>
Tags:

2

Answers


  1. 0

    In your text div you defined the sizes only for desktop screens (col-lg-). To achieve what you want add a class for extra small screens (and in your case need to use the full width of the viewport (12 columns).

    So you need to change this line:

    <div class="col-lg-6 mx-auto">
    to this:
    <div class="col-lg-6 col-12 mx-auto">.

    P.S.: Official documentation is your friend!

    Bootstrap 5 Grid system

    UPDATE:
    I found the real cause of the issue:
    You set the image sizes in the img tag width="450" height="275". Remove these attributes and set the image size based on screen size with media queries

    Login or Signup to reply.
  2. 0

    In mobile view, the text content within the .col-lg-6 class might be overflowing its container and pushing the logo down, causing misalignment. This can happen because .col-lg-6 is designed for larger screens (desktops) and takes up half the available space.

    Solution:

    There are two main approaches to fix this:

    1. Use Responsive Grid Classes:

      • Replace .col-lg-6 with responsive grid classes like .col-sm-12 or .col-md-12. These classes take up the full width on smaller screens (smartphones and tablets), ensuring your text content stays below the logo.

      Here’s the updated code snippet:

      <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-sm-12 mx-auto">  <p class="lead mb-4">...</p>
        </div>
</div>

    2. Media Queries:

      • You can use media queries in your custom CSS to adjust the width of the .col-lg-6 class for smaller screens. This approach gives you more control over the layout.

      Here’s an example:

      @media (max-width: 768px) {
    .col-lg-6 {
        width: 100%;  /* Adjust width as per needed */
    }
}
    • Consider using flexbox or grid layout for more control over element positioning on mobile screens.
    • Test your website on various mobile devices and screen sizes to ensure proper alignment.

    By implementing one of these solutions, your text content should stay below the logo in the mobile view, resolving the misalignment issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search