Components are colliding with one another in the realm of Bootstrap 5

I am in the process of developing a website using Bootstrap. However, I am facing an issue where certain elements are overlapping when I switch my website to a mobile responsive view, similar to the image here.

This is how the site appears in the large version.

I have attempted to resolve this by adding some media queries.

@media (max-width: 992px) {
    /*Intro*/
    .title {
        font-size: 30px;
    }

    .title-text {
        font-size: 12px;
    }

    .title-btn button {
        padding: 10px 35px !important;
    }
}

However, despite my efforts, the elements continue to overlap when I switch to the mobile responsive view.

Here is a snippet of my HTML code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Intro -->
    <section class="intro" id="intro">
        <div class="container">
            <div class="row">
                    <div class="col-lg-6 order-1 order-lg-2">
                        <img class="img-fluid" src="Img/Intro/Phone.png" alt="">
                    </div>
                    <div class=" col-lg-6 order-2 order-lg-1 title-block">
                        <div class="pre-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
                                <path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
                                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
                            </svg>
                            <p>#1 Editiors Choice App of 2020</p>
                        </div>
                        <h1 class="title">
                            Best app for your
                            modern lifestyle
                        </h1>
                        <p class="title-text">
                            Increase productivity with a simple to-do app. app for
                            managing your personal budgets.
                        </p>    
                        <div class="title-btn">
                            <button type="button" class="btn btn-primary">
                                Try for free
                            </button>
                            <a href="#" class="title-link">Watch demo video</a>
                        </div>  
                    </div>
            </div>
        </div>          
    </section>

    <!-- Features -->
    <section class="features" id="features">
        <div class="container">
            <div class="companies">
                <p class="companies-text">Trusted by companies like</p>
            </div>
            <div class="row companies-logos">
                <div class="col-sm">
                    <img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
                </div>
                <div class="col-sm">
                  <img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
                </div>
                <div class="col-sm">
                  <img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
                </div>
                <div class="col-sm">
                  <img src="Img/Companies/Express.png" class="img-fluid" alt="">
                </div>
                <div class="col-sm">
                  <img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
                </div>
            </div>
        </div>
        
        
    </section>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

It seems like there is an issue with the HTML structure in your footer section. When initializing the row div, the "col" feature should have been used as you did. Your code closely resembles what I explained, but there is a slight difference compared to what I mentioned. To clarify things, I have created this snippet for you. Remember to use the "col" feature on the element you wish to layout. In your code, you used it for the container of image tags, which is not the intended element for responsiveness. This is why they are overlapping. Hopefully, this helps you understand the issue. Cheers!

.box{
  background-color: red;
  width: 200px;
  height: 200px;
  display: inline-block;
}
.box-1{
  background-color: yellow;
}
.box-2{
  background-color: purple;
}
.box-3{
  background-color: blue;
}
.box-4{
  background-color: green;
}
.box-5{
  background-color: lightpink;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>stackover</title>
  </head>
  <body>
    <section class="features" id="features">
      <div class="container">
        <div class="companies">
          <p class="companies-text">Trusted by companies like</p>
        </div>
        <div class="row companies-logos">
          <div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
          <div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
          <div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
          <div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
          <div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
        </div>
      </div>
    </section>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

javascripthtmlajaxcheckboxget

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Can the color of an ion-radio be adjusted when it is not selected?

I am experiencing an issue where I need to change the default color (grey) to a specific color of my choice, such as the primary color. I have attempted the following methods: <ion-col sizeXs="12" sizeMd="6" class="radio-box"> <ion-item line ...

javascriptjqueryhtmlcssionic-framework

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

javascriptjqueryhtml

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke

Is there a way to instruct the code to select between two variables and align their values?

I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...

c#cssseleniumxpath

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

htmlcsspositioning

What is the best way to isolate the CSS of individual components in Angular 2?

For the first component: CSS-- ngx-dnd-container { color:black; background-color: white; } HTML- <ngx-dnd-container [model]="targetItemsA" dropZone="multiple-target-a" </ngx-dnd-container> For the sec ...

htmlcssangularangularjs-directiveangular-cli

Looking to troubleshoot the selenium error in a loop, specifically the InvalidSelectorException that states: "invalid selector: Unable to find element with the specified xpath"?

I have been attempting to create a for loop in selenium that checks if certain buttons on a website are clickable, clicks on them, and refreshes the page until they are. However, I am encountering an error with my Xpaths as shown below (InvalidSelectorExce ...

htmlseleniumloopsxpath

What is the best way to retrieve information from a data set?

After borrowing some basic HTML, CSS, and JavaScript code from CodePen, I ran into an issue while attempting to convert it to React. The error message says that it cannot read properties of null (specifically 'dataset'). Here is the JavaScript c ...

javascripthtmlcssreactjsfrontend

Limiting the resizing boundaries in jquery ui: A step-by-step guide

Currently, I am using jquery ui to adjust the size of a div container. My goal is to restrict the resizing to a specific designated area. containment:"parent" After implementing the code, the drag operation adheres to the specified area boundaries. How ...

htmljquerycss

Issues with the code: $("input[type=checkbox]:checked").each(function() { var checkboxId = $(this).attr("id"); });

When submitting a form, I need to retrieve the IDs of all checked checkboxes. Currently, $(this).id() is causing an error. What is the correct code to obtain the IDs of all checked checkboxes? $("#pmhxform input:checkbox:checked").each(function() { ...

javascriptjqueryhtmlvalidation

I am looking to incorporate a feature in my form that allows for multiple file uploads and displaying them

Currently, I have a single file upload input field in my form and it works perfectly fine. However, I am looking to add multiple file inputs to the form as well. I have attempted various methods to integrate the code for multiple file uploads into my form, ...

phphtmlmysqlform-submit

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

htmlcssmedia-queries

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

What causes Spyscroll to be impacted by Collapse in Bootstrap 5?

I'm utilizing bootstrap 5 as my CSS framework and currently working on a significant section. Therefore, I chose to structure it with one row containing four columns, hiding the others using Bootstrap's collapse feature. However, because this is ...

javascriptbootstrap-5

Troublesome situation arising from CSS floats overlapping div elements

It's strange how this issue always occurs when using floats. This is what my div (samle) looks like: <div class="main> <div class="inn_div">&nbsp</div> </div> Here is my stylesheet: .main{ width:250px; border:1px ...

htmlcsscss-float

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

jQuery Swiper slider

I am currently working with the Swiper jQuery slider for my project. As a beginner in programming (js / jquery), I am looking to run a specific function, involving some jquery code, whenever the first slide of the slider is active. It seems that this can ...

javascriptjqueryhtml