I saw one question in this subject - but the answer there doesn't works.
So, as I said in the title, I have a page with <div class="container">. I want that in extra-small devices (767px), this container will become to container-fluid.
Any suggestions?
If you look at the Bootstrap CSS file, the .container class only starts using fixed widths from 768px upwards - below that (767px and below), it simply spans 100% of its parent, exactly the same as container-fluid (default div behaivour albeit with 15px of padding either side):
#media (min-width: 768px)
.container {
width: 750px;
}
In other words, on the face of it, it's pretty pointless if you ask me as the following style applies at all viewports:
.container, .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
And since .container widths don't kick in until 768px and upwards, as you can see container and container-fluid are styled exactly the same below 767px.
EDIT - further to OP's comments, to remove the padding from the left / right side of container, I would first append a secondary class to your container div:
<div class="container nopadding">
This ensures you don't overwrite Bootstrap's default styling. You can then style as follows:
.container.nopadding {
padding-left: 0;
padding-right: 0;
}
Important to ensure that the above style is placed in your custom CSS file and that it referenced AFTER your Bootstrap files.
with jquery you can control it :
remove container class when window.innerWidth is lower than 767 (e.g:any size that you want)and add class container-fluid
$( function() {
if(window.innerWidth <767)
{
$(".container").addClass('container-fluid');
$(".container").removeClass('container');
}
});
when user changes window size :
$(window).resize(function(){
if(window.innerWidth <767)
{
$(".container").addClass('container-fluid');
$(".container").removeClass('container');
}else
{
$(".container-fluid").addClass('container');
$(".container-fluid").removeClass('container-fluid');
}
});
Related
Scenario :
I have two div. One div is title and another is form.
But when I resize it in some screen mobile it not correct.
Todo :
I want when I resize in some screen margin left div title and div form.It
mean when resize margin left of title according to the margin left div form.
How to fix it ?
I hope that I am getting this correct. My understanding is that you are hoping to place the title above the form when viewing on a mobile screen. This is easily done using media queries. See below. W3Schools | Media Queries
<div id="div1"></div>
<div id="div2"></div>
#media only screen and (max-width: 600px) {
.div1 {
display: block;
}
.div 2 {
display: block;
}
}
.div1 {
display: inline-block;
width: 40%;
}
.div 2 {
display: inline-block;
width: 40%;
}
Media queries are powerful because you can use them to dynamically filter styling methods like setting the divs above to display as block. (Filling the entire width of it's container) instead of being placed on the same line as the other block and taking only 40% of it's container. If needed, please submit a markup for review.
in the past couple of days I've been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.
Page that I stretched: https://roi.pub/about-me/
Code I used:
#primary .container {
padding-right: 0px;
padding-left: 0px;}
.layout-content.boxed #primary {
padding: 0px;
}
#media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}
And here's what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I'm just trying to get the content to fill the white container without messing things up.
Advice will be appreciated.
You removed padding from the .container class, which is what needs to be there for bootstrap to work like it should.
NOTE Never override bootstrap added classes, if you want to change how bootstrap work, pull in sass/less version and do your stuff there.
On the .row bootstrap use -15px on left and right to accommodate for padding of 15px on left and right of the .container, thus when you remove padding from .container you get mess, don't override bootstrap.
#primary .container {
padding-right: 0px;
padding-left: 0px;
}
.container needs to have padding of 15px, those lines above is what makes your horizontal scrollbar. When I remove them everything work fine.
If you are not bothered with overrding bootstrap (you should) instead of setting padding to zero on the .container you need to set padding to zero on the columns itself. Like this.
.full-width {
padding: 0;
}
You already have that class, on the element that also have .col from bootstrap.
GENERAL COMMENT
If you find yourself in a need to change bootstrap setting you should use sass/less to alter the setting, but if you find yourself in a need to change bootstrap behavior then DON'T use bootstrap.
Your problem has appeared from the 1170px width of the screen (this is the width of your theme too).
so there are two solutions
Remove the -15px from the margin from the max-width media query: 1170px, and also remove the #primary #content #main paddding
#media (max-width: 1170px){
#primary #content #main {
padding-left: 0;
padding-right: 0;
}
#primary #content {
margin-left: 0;
margin-right: 0;
}
}
Either apply this code #primary .container {overflow: hidden;} on the container to hide any overwriting
Here is my template:
<div id="block1">text</div>
<div id="block2">
<span>content of variable size</span>
</div>
and some basic CSS
#block1 {
float:left;
}
#block2 {
float:right;
}
#block2 span {
}
When reducing the width, how could I make it behave so that, once the two divs cannot fit the page inline, the second div will go below the first (rather than be right floated anymore)?
NOTE: I would like to avoid using media queries.
This responsive theme CSS would be used for multiple sites with content of different sizes.
JSFiddle
In this current JSFiddle, The second div is on the right hand-side. It is fine to me.
If possible without media queries, i would like to design css so that once the second div goes below , the span content is not at the right-hand side
If you mean "I want div2 to go below, but aligned left this time", it's not possible as this behaviour is not predictable using CSS only.
There's no CSS-way to know when it goes below, so impossible to change the floating attribute at this moment.
You could achieve this using Javascript or jQuery. Logic would be:
on ( window resize ) {
if ( div1_width + div2_width > container_width ) {
Change div2 CSS.
}
}
Of course I would suggest to use media queries too.
You can set min-width on the divs. Then, when the line is too small, the one on the right will drop down. However, it will still be floated which may cause issues. That's where media queries come into play to fix such things.
Too many media queries would not make for a pretty responsive design, not to mention they would be a headache.
Anyway, you would have to use at least one media query to achieve a truly responsive design, the simplest example is below:
<div id="block1">text</div>
<div id="block2"> <span>content of variable size</span>
</div>
* {
padding: 0;
margin: 0;
}
#block1 {
float:left;
height: 200px;
background: yellow;
width: 49.5%;
margin-right: .5%;
}
#block2 {
float:right;
height: 200px;
background: tomato;
width: 49.5%;
margin-left: .5%;
}
#block2 span {
}
#media only screen and (max-width : 768px) {
#block1 {
float:none;
width: 100%;
}
#block2 {
float:none;
width: 100%;
}
}
Fiddle here.
If you want to have a look at something more practical, a good starting point is here(its an example of an accordion changing layouts depending on screen size, using media queries).
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.
I have seen the .container class being used in multiple places but never understood the use for it. And there is also the .container-fluid class.
Can anyone explain the use of the container class with a brief example?
It´s simple. a div.container class apply a fixed with (applies margin auto) for containing the content you want inside. And this container is responsive so when you are in XS mode (mobile) the container width is 100%.
.container-fluid just apply a 100% width (full width) in all devices, so you will see your content spanning the entire width of your viewport.
The best way to check this is to create a simple html with a div and set it a background-color, then apply .container and .container-fluid to see the effect resizing your explorer.
The .container classes in bootstrap are just that, containers for your content. By using them, your content inside can take advantage of bootstrap grid system. These classes also add some stylings like padding, centering the container, and making it responsive.
from bootsrap
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>
Margin and width is the difference !!!
#media all and (min-width:992px) {
.container {
width: 970px;
}
}
#media all and (min-width:768px) {
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Normally container-fluid does not provide any margin in any kind of screen
But container provide particular margin in md and lg screen
REFERENCE