increasing the size of the bootstrap container causes the webpage to become unresponsive

Question

increasing the size of the bootstrap container causes the webpage to become unresponsive

I want to increase the size of the Bootstrap container. I added this CSS code to make it bigger:

@media (min-width: 992px) {
        .container.max-width-940 {
            max-width: 1390px !important;
        }
    }

 @media (min-width: 1200px) {
        .container.max-width-940 {
            max-width: 1390px !important;
        }
    }

.container.max-width-940

{
    min-width: 1390px !important;
}

and then applied it in my div tag on my webpage:

<div  style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content" />

However, whenever I do that, the page becomes unresponsive. When I resize the page, controls and text start extending beyond the screen. Here is the code:

<... continue rewriting ...>

html css bootstrap-4 flexbox

Answer 1

Answer №1

If you want to increase the width of the bootstrap container, here's a smart way to do it:

@media (min-width: 1440px) {
    .container {
        max-width: 1240px !important;
    }
}
@media (min-width: 1640px) {
    .container {
        max-width: 1440px !important;
    }
}
@media (min-width: 1840px) {
    .container {
        max-width: 1640px !important;
    }
}
@media (min-width: 2040px) {
    .container {
        max-width: 1840px  !important;
    }
}

$container-max-widths: (
    sm: 700px,
    md: 800px,
    lg: 960px,
    xl: 1140px
) !default;

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1400px,
    xxl: 2000px
);

It's important to note that changing the min-width won't have any effect in this case because bootstrap operates based on max-width.

Answer 2

If you want to increase the width of the bootstrap container, here's a smart way to do it:

@media (min-width: 1440px) {
    .container {
        max-width: 1240px !important;
    }
}
@media (min-width: 1640px) {
    .container {
        max-width: 1440px !important;
    }
}
@media (min-width: 1840px) {
    .container {
        max-width: 1640px !important;
    }
}
@media (min-width: 2040px) {
    .container {
        max-width: 1840px  !important;
    }
}

$container-max-widths: (
    sm: 700px,
    md: 800px,
    lg: 960px,
    xl: 1140px
) !default;

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1400px,
    xxl: 2000px
);

It's important to note that changing the min-width won't have any effect in this case because bootstrap operates based on max-width.

increasing the size of the bootstrap container causes the webpage to become unresponsive

Answer №1

Similar questions

Two headings using the same tags appear distinctively rendered

Unable to adjust row height within the gridview component

What is the best method for aligning buttons in a row with all the other buttons?

Utilize an iframe input field to initiate a Jquery event

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

Calculating the number of characters in each textarea by iterating through them with a

AngularJS causing issues with Materializecss dropdown menu operation

Having Multiple Login Forms on a Single Page

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

`Error occurring with React-router when refreshing nested pages causing CSS not to load`

Hide/Trim the upper right corner of the button

"Test your Knowledge" - Interactive Quiz with PHP and MySQL

Is it possible to monitor and keep a record of every modification made to an HTML element?

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

I'm struggling to successfully insert and retrieve data from a MySQL database using Express.js. I need to figure out how to make these operations work seamlessly across the board

Developers specializing in Google Maps navigate to a particular destination

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Creating Custom Styled Divs Dynamically

Unable to conceal element if it is devoid of content

Challenges encountered when integrating images with Bootstrap's grid system