I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you!

Feel free to visit the website at 


                /*--Overview Headers--*/
                h3.overview-header{
                    // CSS styling
                }
                
                h3.overview-header2{
                    // CSS styling
                }
                
                h3.overview-header3{
                    // CSS styling
                }
                
                /*--Overview Sub Headers--*/
                h4{
                    // CSS styling
                }
                
                /*--Overview Paragraphs--*/
                p.lead2{
                    // CSS styling
                }
                
                p.lead3{
                    // CSS styling
                }
                
                /*--Overview Sections--*/
                section#overview1{
                    // CSS styling
                }
                
                section#overview2{
                    // CSS styling
                }
                
                section#overview3{
                    // CSS styling
                }
                
                .overview-wrapper{
                    // CSS styling
                }
            

                <!-- Bootstrap CSS Link -->
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
                
                <!-- Overview Section One -->
                <section id="overview1">
                    <div class="container-fluid">
                        <!-- Row with col-sm-6 -->
                    </div>
                </section>
                
                <!-- Overview Section Two -->
                <section id="overview2">
                    <div class="container-fluid">
                        <!-- Row with col-sm-6 -->
                    </div>
                </section>
                
                <!-- Overview Section Three -->
                <section id="overview3">
                    <div class="container-fluid">
                        <!-- Row with col-sm-6 -->
                    </div>
                </section>
htmlcssbootstrap-4responsive

Answer №1

Make sure to include the necessary meta tag for responsive design:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

In addition to using col-sm-6 for tablets and larger screens, consider using col-6 for better mobile visibility.

Lastly, it may not be required to set a fixed height for overview elements.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        /*--Your custom CSS here--*/
    </style>

</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

Answer №2

To ensure responsiveness in this scenario, simply include the img-fluid class with the images. It's that simple!

Amendment:

The reason for the issue you encountered was:

You had an excessive amount of unnecessary CSS alterations.

Most tasks achievable with custom CSS can be accomplished (and should be) using native Bootstrap classes. Introducing custom CSS tweaks often leads to the need for even more tweaks to rectify issues caused by the original tweaks...

My suggestion is:

Remove all your custom CSS, adopt the code snippet below as a foundation, and then gradually introduce your custom CSS to identify where it conflicts with Bootstrap. (I could provide details, but I believe you prefer to learn through practice) Just a tip: Bootstrap 4 relies on flexbox by default. Disrupting this may not be advisable.

Moreover, consider allowing Bootstrap to rearrange certain images for smaller screens (if you prefer images to always precede text in corresponding sections). However, this aspect was not part of your initial query.

Lastly, a separate div is not necessary for container-fluid. You can apply that class directly to your sections and eliminate the divs. Bootstrap classes can be incorporated into various HTML elements such as section, main, nav, etc. It doesn't have to be a div.

View the fully functional code snippet below by clicking the "run code snippet" button and expanding it to a full page:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-M6czoRBPO4I9NMCCRQE4GDyVV8bv319UihzckjpPI10dh4A4TV5aryJnrDtlT1k7" crossorigin="anonymous">

<!-- Overview Section One -->
<section id="overview1">
    <div class="container-fluid">
        <div class="row justify-content-left">
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placedog.net/900/400/tech" alt="laptop image">
                </div>
            </div>
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header">Overview Header One</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Dummy text for illustration.</p>
                    <p class="lead2">Dummy text for illustration.</p>         
                </div>
            </div>
        </div>
    </div><!-- container -->
</section>

<!-- Overview Section 2 -->
<section id="overview2">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-6 text-left overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header2">Overview Header Two</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Dummy text for illustration.</p>
                    <p class="lead2">Dummy text for illustration.</p>
                </div>      </div>
            <div class="col-sm-6 text-center overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placedog.net/900/400/animals" alt="laptop image">
                </div>
            </div>
        </div>
    </div> <!-- container -->
</section>

<!-- Overview Section 3 -->
<section id="overview3">
    <div class="container-fluid">
        <div class="row justify-content-left">
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placedog.net/900/400/nature" alt="laptop image">
                </div>
            </div>
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header3">Overview Header Three</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Dummy text for illustration.</p>
                    <p class="lead2">Dummy text for illustration.</p>
                </div>
            </div>
        </div>
    </div><!-- container -->
</section>

Answer №3

To improve your CSS code, consider commenting out unnecessary styling: 


.overview-wrapper {
    -ms-flex-preferred-size: 0;
     flex-basis: 0; 
    -webkit-box-flex: 1; 
    -ms-flex-positive: 1;
    flex-grow: 1; 
    max-width: 100%; 
    height: 650px; 
}

Make sure to update the column classes from col-sm-6 overview-wrapper to col-md-6 overview-wrapper

Lastly, don't forget to adjust the background color for smaller devices as well: 


    section#overview1 {
    background: linear-gradient(to bottom, #E7643B 50%, #fff 50%);
    }

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

Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution. Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site. My task is to utilize this ID to make aja ...

javascriptjqueryhtmlajaxrest

"Keeping your HTML content up-to-date with AngularJS dynamic updates

I've noticed that when I upload changes to my AngularJS HTML partial files, there is a caching issue where the old data is displayed. It takes a few refresh actions before the changes become visible. Is there a way to make these changes appear immedi ...

javascripthtmlangularjs

Design a table featuring button groups using Bootstrap styling

I'm currently using Bootstrap 4 and facing some issues while attempting to create a button group with multiple rows, similar to the design shown in the image provided below. The default button groups in Bootstrap appear to only support arranging butto ...

csstwitter-bootstrapbootstrap-4buttongroup

Issue with jQuery's .show method not functioning properly following the .hide method

Is there a way to make it so that only the "pastInvestments" are displayed when the "pastButton" is clicked, and only the "currentInvestments" are displayed when the "currentButton" is clicked? In the HTML code below, there are 2 buttons and 2 divs: < ...

jqueryhtmlcss

What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels: ___ _________ ___ | | | | | | | | | | | | | | | | | | | | | | | | |___| |_________| |___| When I resize the window slightly, the layout changes: ___ ...

asp.netcss

Engaging Interactive Image/Graphic with React and HTML

Just starting out with react/html and attempting to create an interactive Graphic/Image. My goal is to have a circle highlight in color when the mouse hovers over it, and change to a different color when clicked. Is this achievable? Any advice on how to ac ...

htmlreactjssvg

The elements at the bottom of the Google homepage do not stay in place when hovering

I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome ...

htmlcss

The image's max-width property is not functioning as expected within a flexbox layout in Internet Explorer 11, yet it displays

I'm currently working on a 2 by 2 grid layout using flexbox, where the items in the first column are combined together. Check out the setup below: https://i.sstatic.net/fAhtu.png Everything looks great in Google Chrome but unfortunately, I've r ...

htmlcssflexboxinternet-explorer-11

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

Steps to create a loading bar that starts loading when an ajax task begins

What is the best way to show a loading bar as an AJAX task begins on a page? Additionally, how can we make sure that hitting the back button will return to what was being viewed before that specific AJAX task? ...

htmlajax

The alignment feature in the center is malfunctioning

I'm currently utilizing jQuery Mobile and have the following HTML along with CSS: .ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block ...

jqueryhtmlcssjquery-mobile

Menu elements should display a responsive behavior where on mobile devices, only the icon is shown instead of the word "menu"

Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right s ...

htmlcss

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

javascripthtmlcssangularjs

How can we stop the constant fluctuation of the last number on a number input field with a maxLength restriction

In my ReactJS code, I have an input field that looks like this: <input type="number" onKeyPress={handleKeyPress} maxLength={3} min="0" max="999" step=".1" onPaste={handlePaste} /> Below are the functions associated w ...

javascripthtmlreactjsinput

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

csstwitter-bootstrap-3

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

htmlcss

When using CSS column-fill auto, the printed page breaks are disregarded

The column-fill:auto property functions by filling one complete column before moving on to the next. .two-column { column-count: 2; column-fill: auto; } In Chrome, this behavior is consistent while viewing on screen, but when printing and encounterin ...

cssgoogle-chromecss-multicolumn-layout

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

htmlbootstrap-4

Having trouble with uploading image files in Laravel Vue.js?

I have been trying to upload my image file to a storage folder using Laravel and Vue.js. However, when I try to print the data using dd();, I get no response or error. How can I tell if I am doing it correctly? I suspect the error lies in the formData whe ...

phphtmllaravelvue.js

What is the best way to incorporate Font Awesome icons into a UTF-16 encoded HTML document?

Trying to incorporate Font Awesome icons in UTF-16 encoded HTML pages can be a bit tricky. Following these steps should help you achieve the desired results: <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawe ...

cssunicodeutf-8font-awesomeutf-16