After the final breakpoint is reached in Firefox, min-width for Bootstrap 4 element increases to over 17 million pixels

When implementing my Magento 2 theme, I encountered an unusual bug while using Bootstrap 4. If I adjust the device width to 575, certain elements on the page inexplicably expand to almost 20 million pixels in width.

Interestingly, this issue only arises in certain browsers as it works perfectly fine in others. I even tested it on the mobile Firefox browser on my Android device with the same result.

Breakpoints:

xxs: 0,
xs: 450px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1500px

UPDATE: I recently introduced a new breakpoint at 450px. For a better experience, try a width below 450px.

https://i.sstatic.net/ReZnr.gif

UPDATE:

The issue seems to originate from the <div> with classes column main.

By applying max-width: 100% to this element, the display looks somewhat improved. However, I am still puzzled by the root cause of this behavior.

cssfirefoxsassbootstrap-4magento2

Answer №1

One issue that was identified is the absence of a maximum width set for the 'xs' breakpoint in the scss\_variables.scss file!

Previous Configuration:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

Updated Configuration:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (
  xs: 540px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

To address this, an additional breakpoint was introduced to prevent excessively large max-width values on smaller devices.

$grid-breakpoints: (
  xs: 0,
  xs_sm: 341px,
  xs_md: 381px,
  xs_lg: 471px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (
  xs: 340px,
  xs_sm: 340px,
  xs_md: 380px,
  xs_lg: 470px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

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

Container beyond div

Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided? Appreciate any assistance. Live ...

htmltwitter-bootstrapcssbootstrap-4

Utilizing JQuery to modify CSS in a partial view

My layout includes a button and a dynamically filled div below it using ajax and a partial view. Here is the code related to the button: $(document).on('click', '.btn-release', function () { StartReleaseVersionEdit(); ReleaseV ...

jquerycssajaxasp.net-mvcpartial-views

Unable to save the current light/dark mode preference to local storage

Being a beginner in JavaScript, I am currently working on implementing a simple light mode button for my website which defaults to dark mode. The transition between JS/CSS dark and light modes is seamless, giving the site an appealing look when switching t ...

javascripthtmlcsslocal-storagedarkmode

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

I'm stuck on nesting a "navbar" in a Bootstrap row. The issue I'm facing is how to get the links to expand across the entire column. https://i.sstatic.net/9QbSN.png The code for this problem looks like: <div class="col-6 p-3 ...

cssasp.net-corerazorbootstrap-4

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

csshtml

Revamp Your Workflow with Python: Discover Up-to-Date Guidelines for Automating Selenium Browser Launches

--------Responding to a Post Identified as a Duplicate Question As I am still in the process of learning the basics of programming, I was uncertain about the relevance of the information provided in the other post, particularly since it pertained to the i ...

pythonpython-3.xseleniumfirefox

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code? const Profi ...

javascripthtmlcss

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

htmlcss

What is the best way to bring in this interface from the React-Particles-JS library?

I have been attempting to segregate my parameters from my JSX within the react-particles-js library. I organize my parameters in an Object: let config = { "particles": { "number": { "value": 50 }, ...

htmlcssreactjstypescriptparticles.js

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

One of my clients is looking to integrate a merch shop into their website. The existing merch page is not visually appealing and doesn't match the aesthetic of the client's site. I am considering using AJAX GET to fetch the content of the merch p ...

javascriptcssajaxjquery

WindiCSS classes are not functioning properly within a Nuxt application

I've been encountering some difficulties with WindiCSS. The classes are not being applied to the elements as expected. I attempted to install an older version of Windi, but the issue persisted. I even tried switching to Tailwind instead of Windi, but ...

cssvue.jsnuxt.jstailwind-csswindicss

Tips on updating the color of the drawer component's background in Material-UI using React

I have been attempting to change the background color of a drawer component in React, but I have only been successful in changing the background behind the drawer or the field with the items. Here is the code I am using: const useStyles = makeStyles({ ...

cssreactjsmaterial-uireact-navigation-drawer

Requesting footer details to be displayed within the header section using jQuery dataTables

I'm currently working with jQuery dataTables and facing an issue. Due to a large number of records, I need to display footer information "Showing 1 to 2 of 2 entries (filtered from 3352 total entries)" in the header section right after the "Show Entri ...

phpjqueryhtmlcssdatatables

The CSS is not functioning properly on the admin page of a Django application hosted on AWS

After following a tutorial on setting up Python Django on AWS Elastic Beanstalk, everything seemed to be working fine except for the CSS on the administration page. I tried troubleshooting by looking at various Stack Overflow threads like Default Django 1 ...

pythoncssdjangoamazon-web-servicesamazon-ec2

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

What is the best way to give an element or container a variable width rather than a fixed width?

I have a query regarding positioning and variable width. I've applied the following CSS: *{ border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/ } By adding this to all elements, I can visualize their p ...

csshtmlwidthcss-position

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

CodePen displaying CSS errorsI'm having trouble getting my CSS

I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...

htmlcss

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

javascriptjqueryhtmlcssfrontend