How to resize container in bootstrap.css - css

How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>

You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}

The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.

Related

Responsiveness and side margins on big screens

I am having trouble developing a website using Bootstrap. I am currently trying to have a margin on the side, when the screen or viewport is too big. But when I finally got it, it broke the responsiveness of the page.
The whole body is inside this div to create the margins:
div style="width:1300px; margin:auto;"
Add this media query to your CSS and make sure it's referenced after any other CSS:
#media screen and (min-width: 1300px) {
body {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
}

How to use min-width or max-height for panel elements in a theme?

How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}

Css Bug in Prestashop cause quick view miss

When I use default theme, I want to change container width to 100% on global.css in line around line 990:
Before:
#media (min-width: 1200px) {
.container {
max-width: 117022px; }
after:
#media (min-width: 1200px) {
.container {
max-width: 100%; }
Then the partis missing. How to fix it ? Thanks
Don't change styles for classes that are used on so many elements. If you want to have full width container use bootstraps container-fluid class instead of container for the element you want to be full width

Need to create wider container in Bootstrap - 1920px

I have .psd design for client site, graphic designer drew container width up to 1920px, and I need a help how to properly set up width of container to 1920px.
I know how to set up smaller
#media (min-width: 1200px)
.container {
width: 1170px;
}
Instead of forcing your containers to 1920px and overriding the default bootstrap grid sizes, you may want to look at .container-fluid, which is inside Bootstrap's packaged css.
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
Link: http://getbootstrap.com/css/#overview-container
You could utilize Bootstrap's container-fluid class to fill the entire width first, then you can restrict the width responsively... Here is an example in Sass:
.wide-container {
#extend .container-fluid; // which has max-width: auto; (full)
}
// on medium screens and beyond...
#include media-breakpoint-up(md) {
.wide-container {
max-width: 1470px; // limit the width here!
}
}
Just reuse the media query you have above, and simply decide when you want the container to change to that size (something greater than 1920px).
#media (min-width: YOUR VALUE HERE)
.container {
width: 1920px;
}
OR, upon reading your question again, you said, "up to 1920px", so a fluid container?
Then simply set:
.container {
max-width: 1920px;
width: 100%;
}
Your problem is not clear enough. but if you want to set up 1920px wide container, just override the default container width with "!important". like this,
.container { width: 1920px !important; }
Or if you wish to 1920px container only for larger displays, you can use media query like this,
#media (min-width: 2400px) {
.container {
width: 1920px;
}
}
this rule will apply only for displays that is at least 2400px wide.
You can apply your own CSS according to the screen size you want to show as the below example will work on a larger resolution size than 1599px.
#media (min-width: 1600px)
.container {
max-width: 1500px;
}
You could override BootStrap's default styling as the answers above describe, or you could create a new class such as:
.container.wide {
width: 1920px;
}
Then add the class to the container <div>'s such as:
<div class="container wide">
CONTENT
</div>
This ensures only the <div>'s you add the wide class to are effected, meaning you're still free to use <div class="container"> for normal BootStrap container behavior if required.
EDIT
As Vikas has said in his comment, the above style would apply also on mobile. In this case, just wrap in a media query as follows:
#media (min-width: 1950px) {
.container.wide { width: 1920px; }
}
This css will override bootstrap's container sizing. Adjust the max-width values as needed. Tested with bootstrap 4.6.1
/* Override bootstrap to make containers wider by 60px */
#media screen and (min-width: 576px) {
.container, .container-sm {
max-width: 600px;
}
}
#media screen and (min-width: 768px) {
.container, .container-md, .container-sm {
max-width: 780px;
}
}
#media screen and (min-width: 992px) {
.container, .container-lg, .container-md, .container-sm {
max-width: 1020px;
}
}
#media screen and (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1200px;
}
}
Based on your reactions you probably want
.container{
width: 1920px !important;
}
though I don't understand why :). On every smaller resolution it will scroll now.

Bootstrap centered 100% width cover responsive

I have troubles using the container class of bootstrap because I need a responsive 100% width cover. If I use this class I get a small margin in the left and in the right. So I want to that margins goes. How can I do it and still getting responsive?
Here is the container class:
.container {
margin-left: auto;
margin-right: auto;
}
IF I use the col-12 class who is 100% width, the image goes to one side when I resize and I need a centered image when I resize.
Here is the cover using the container class, you notice the right and left margin
This is the look if i use the col-12 class:
And this is what I need but without the margins. (Of course only when I'm at 100%)
Thanks.
i fixed the 100% width changing this:
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
To this:
#media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
That's because 1280px is the resolution of my screen.

Resources