Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Hey everyone, I've encountered an issue with my code. It's working perfectly fine in Firefox, but in Chrome and Opera, the layout is all messed up. Can anyone help me pinpoint what might be going wrong here?

<div class="row broadband-block">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 d-flex justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3557475a545157545b51185c565a5b75585a571b455b52">[email protected]</a>">
                <source media="(max-width: 1200px)"
                        srcset="/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6979646a6f696a656f26626864654b666e6f257b656c">[email protected]</a>">
                <source media="(min-width: 1201px)"
                        srcset="/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbabb6b8bdbbb8b7bdf4b0bab6b799e8eaefeff7a9b7be">[email protected]</a>">
                <img class="img-fluid" src="~/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9888959b9e989b949ed793999594bacbc9ccccd48a949d">[email protected]</a>" alt="broadband-icon">
            </picture>
            <h2 class="electricity-header">Broadband</h2>
        </div>

        <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
        <p class="electricity-text">
            We pride ourselves on the quality of our products and award-winning customer service. We understand how important
            the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
            with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
            you the flexibility to grow.<br /><br />

            Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

            Not sure which solution is right for your business? Call one of our advisors
            today on <span class="voice-number-color">#######</span>
        </p>
        <div class="col-12 col-sm-8 d-flex justify-content-center justify-content-sm-start landing-page-buttons">
            <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                <span class="text">CONTACT US</span>
            </button>
        </div>
    </div>
</div>

///////// CSS /////////

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}
htmlcssflexboxbootstrap-4

Answer №1

The use of the d-flex class was causing a display issue on Chrome but not affecting Firefox, Safari, and other browsers. Removing the class resolved the display problem across all browsers.

Check out the CSS below:

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}

Here's the HTML snippet:

<div class="row broadband-block container">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aeccdcc1cfcacccfc0ca83c7cdc1c0eec3c1cc80dec0c9">[email protected]</a>">
                <h2 class="electricity-header">Broadband</h2>
            </div>

            <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
            <p class="electricity-text">
                We pride ourselves on the quality of our products and award-winning customer service. We understand how important
                the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
                with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
                you the flexibility to grow.<br /><br />

                Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

                Not sure which solution is right for your business? Call one of our advisors
                today on <span class="voice-number-color">#######</span>
            </p>
            <div class="col-12 col-sm-8 justify-content-center justify-content-sm-start landing-page-buttons">
                <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                    <span class="text">CONTACT US</span>
                </button>
            </div>
        </div>
    </div>
</div>

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

Child's transformation leads to strange overflow scroll appearance?

What causes the vertical scrollbar to increase in size in this situation while the horizontal scrollbar remains unaffected? <div style="width:200px; height: 200px; overflow:scroll"> <div style="width: 400px; height: 400px; background-color:or ...

htmlcssoverflowcss-transforms

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

javascripthtmlcsstwitter-bootstrapmaterialize

Exploring color options in matplotlib for HTML designs

Is there a way to change color in a matplotlib plot using html in Python? I attempted plt.plot(x,y,marker=".",color="#e0e0e0") However, this resulted in data points displayed as ".", connected by lines of color #e0e0e0 which is not desired. I also experi ...

pythonhtmlmatplotlib

"Enhancing Your Website with Dynamic CSS3 Div Animations

Seeking assistance in displaying an empty div after a CSS3 Animations loading circle has completed. Any guidance is welcome! jsFiddle ...

htmlcss

How to display a three.js scene in the center of a container

I'm having trouble getting my three.js scene to display above some cards and right below my navigation bar. Currently, the scene is rendering under the cards and is not centered. Despite looking at other forum posts for help, I can't seem to figu ...

javascripthtmlcssthree.jsrendering

I am disappointed with the lack of functionality in Angular's HTML type inference

When working inside an Angular component, I want to select a div element by id or class. This method works menuDisplayDiv = document.getElementsByClassName("some_class")[0] as HTMLDivElement; menuDisplayDiv = document.getElementById("some ...

htmlangulartypescript

The color of active links in TailwindCSS remains unchanged

In my project, I am using NextJS along with Tailwind CSS to create a top navigation bar. My goal is to change the text color for active links within the navigation bar. Below is the code snippet I have implemented: const Header = () => { return( ...

javascripthtmlcssnext.jstailwind-css

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

javascripthtmlajax

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...

c#htmlcssasp.netimage

What is preventing the container slide from reacting solely to the image?

I've been working on an image and a slider, and everything seems to be functioning as intended. However, there is a strange reaction on the left side even before reaching the image. I've tried tweaking it, but I can't seem to figure out the ...

htmlcss

Screen wrapping with HTML tags (default) and content (if it exceeds)

After researching how to ensure that a webpage wraps all its content, I discovered that maintaining the width property of the html tag can help the height adapt automatically as per the content. However, my challenge arises from the need for dynamic conte ...

htmlcss

What methods can be used to test scss subclasses within an Angular environment?

Exploring different background colors in various environments is a task I want to undertake. The environments include bmw, audi, and vw, with each environment having its own unique background color. Need help writing an Angular test for this? How can I mod ...

cssangulartypescriptunit-testingangular-test

I am looking to display multiple divs sequentially on a webpage using JavaScript

Looking to display a rotating set of alerts or news on my website. The goal is to show each news item for a certain number of seconds before moving on to the next one in line. However, I'm new to javascript and need help creating a code that will cont ...

javascripthtml

How to Use Jquery to Deactivate a Div with a Background Color

Currently, I have a div that contains several child divs. My goal is to disable the parent div and all of its children, showing them in gray color. I initially tried using the CSS property opacity, but unfortunately, the background color didn't change ...

jqueryhtmlcss

Is there a way to automatically close the Foundation topbar menu when a link is selected?

On my single page website, I am utilizing Zurb Foundation's fixed topbar which includes anchor links to different sections of the page. My goal is to have the mobile menu close automatically whenever a link inside it is clicked. As it stands now, whe ...

javascripthtmlcsszurb-foundation

In my ejs file, I need to input a name and then process it in my post request

I am working on an ejs file where I need the user to input their username into a form. I will then use this username in a .get request to perform certain logic. However, I am encountering an issue where the username is showing up as undefined. Here is a s ...

htmlnode.jsmongodbexpressejs

Managing time intervals and scoping challenges in a Jquery plugin

Currently, I am in the process of creating a simple JQuery plugin with a specific functionality. My goal is to pass a single element like $("div").applyPlugin(); and have it loop through each selector provided, setting an interval that is unique to that in ...

javascriptjqueryhtmlscope

When the section comes into view on the screen, the CSS animation will play only one time

While browsing through , I found some fantastic animations that inspired me. The animations at the header seem to be standard CSS animations with delays. However, as you scroll down and other sections become visible, the animations reappear only once. Can ...

javascripthtmlcssanimationcss-animations

Struggling to extract information from HTML code through Python web scraping techniques

Hello there! I'm currently in the process of extracting dividend history data for a specific stock from a website using web scraping in Python. However, being new to Python, I'm facing some challenges in retrieving the data. Below is a snippet of ...

pythonhtmlcsvweb-scraping

When hovering over the menu, the sub-menu is displayed and the content slides downwards. Is there a way to prevent the content from sliding down and have the sub-menu overlap the

When the main menu is hovered over, a sub-menu appears and the content below the main menu slides down. Check out the code snippet below: HTML: <div id="holderDiv"> <div id="menu"> <a href="#" id="items">Menu 1</a> < ...

htmlcss