When i use Bootstrap 3 Non-Responsive version the grid keep the responsive features for the offset on browsers lower than #media (min-width: 768px) and that make them disappear and move my layout.
I searched for the issue on the Internet but no one seems to have the problem.
I will keep looking and try to fix it.
I found the problem (I forgot to add width: 970px !important; to my style.less)
To activate Bootstrap Non-Responsive *as written on bootstrap documentation:
1.- Omit the viewport mentioned in the CSS docs
2.- Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3.- If using navbars, remove all navbar collapsing and expanding behavior.
4.- For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
.col-xs-offset-* classes work for non-responsive offset as well.
Related
I need a container, such that it would take 100% aavilable width until breakpoint (max-width). After reading official docs, responsive fluid container seemed like a perfect choice.
Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100% wide (fluid) until particular breakpoint is reached at which point a max-width is applied.
Breakpoints table from official docs
which says that md breakpoint is maxed to 720px. But that behaviour is different in reality.
During testing I discovered, that container-md max-width is set to 960px if viewport is more that 992px.
screenshot of active css rule on container-md
<b-container fluid="md">reproduced Codepen
Do I not understand docs correctly? Is there components with above described functionality?
The container max-widths for the various breakpoints (assuming default SCSS vars) are listed in the layout docs at https://bootstrap-vue.js.org/docs/components/layout#grid-options
make sure you have #import "~bootstrap/scss/bootstrap"; added in your custom.scss
https://bootstrap-vue.org/docs#using-custom-bootstrap-scss
This work for me.
<b-container :fluid="'md'">
</b-container>
in inspect element it should be class="container-md"
I've recently deployed my first ever website and on my wide screen 1920x1080 monitor everything looks fantastic. However, things start to get really weird on 13" laptop screens, tablets and mobiles. I've been analysing my code and a few development tools such as googles and bootstraps recommendations for mobile and I just can't quite seem to understand what it is in my code that needs fixing.
On mobile, it's possible to scroll across all the way to the right to parts of the website that shouldn't even exist, just scrolling over to white space. I've managed to remove the navbar for mobile - a start, but honestly, I feel a bit lost/overwhelmed and can't seem to find the root cause of this issue.
Here is my website: -redacted-
and -redacted- is my github repository
The problem is that your using fixed width's for the elements on your page.
E.g. for the class .container you specified a width of 970px. Try using percentages, like so:
.container {
width: 80%;
margin: 0 auto; //to center it
}
You can basically take this solution and apply it to the other issues on your page, like the header.
Also note:
You should also look into media queries, that would enable you to keep the page as it is for large screens and only change it for smaller screens, defining, e.g., a max-width:
#media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}
EDIT:
I understand you are using Bootstrap - in that case you would need to entirely delete all statements that are overriding Bootstrap's default configurations.
Anyway, keep the upper recommendations in mind for future CSS coding.
You have set your containers width with px.
Try to change them with % or directly erase those px measures.
Bootstrap containers adjust themselves to the correct width they need.
You have this rule in your CSS, which is ruining the responsive effect the .container class from Bootstrap is supposed to have (overriding the media-query-set width it should be using, and indeed is using in other parts of the page):
.myskills .container {
width: 1500px;
position: relative;
top: 35px;
}
Setting a fixed width, in this example, being the problem.
There may be more examples of things like this on the site, so I'd advise removing all examples of this that you can find.
In general I wouldn't advocate overriding Bootstrap CSS classes without being very sure why you need to do so, particularly the structural elements like .container, .row and .col-xx-x classes.
When I shrink my browser window down width wise it seems around 420px is the lowest it will let me go.
I am referring to Bootstrap 3 with no custom media queries.
Can you design responsive Bootstrap 3 for screen widths of 280px without requiring custom media queries?
Thanks.
At screen widths below 360px, top-level .col-xs-1 Bootstrap grid columns start to wrap (even though conceptually, they're supposed to never wrap). See also https://github.com/twbs/bootstrap/issues/13221
The problem can be mostly avoided by not using col-xs-1 on very small screens. Or by using custom media queries.
Read about the visible-xs,visible-md etc...
You will first understand the visible class of bootstrap which you find here...
responsiveness in twitterbootstrap
I am using Bootstrap 3 in my WordPress theme.
Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width.
How would I set this non-responsivity up?
(Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?)
There is a section in Bootstrap docs about disabling responsivness:
http://getbootstrap.com/getting-started/#disable-responsive
Steps to disable responsive views
To disable responsive features,
follow these steps.
Remove (or just don't add) the viewport <meta> mentioned in the CSS
docs
Remove the max-width on the .container for all grid tiers with
max-width: none !important; and set a regular width like width:
970px;. Be sure that this comes after the default Bootstrap CSS. You
can optionally avoid the !important with media queries or some
selector-fu.
If using navbars, undo all the navbar collapsing and
expanding behavior (this is too much to show here, so peep the
example).
For grid layouts, make use of .col-xs-* classes in addition
to or in place of the medium/large ones. Don't worry, the extra-small
device grid scales up to all resolutions, so you're set there. You'll
still need Respond.js for IE8 (since our media queries are still there
and need to be picked up). This just disables the "mobile site" of
Bootstrap.
What about this?
.non-responsive { width: 800px !important; } //or whatever width you want it to be
I'd like to change the "cutoff" width (currently 767px) at which Bootstrap changes from small-desktop mode (i.e. grid elements in a row are still horizontally placed) to phone mode (i.e. grid elements in a row are placed on top of each other and fill the screen width). Specifically, Bootstrap uses queries like #media (min-width: 768px) and (max-width: 979px). It seems that the 767 and 768 are hard-coded into the LESS source code, though. Is there a supported way to do this, or will I just have to make the changes manually and hope it doesn't break anything?
EDIT: Yes, I know that Twitter chose these values for a reason... it just strikes me as odd that seemingly everything else in the framework is modular and customizable.
The LESS value you look for is
#grid-float-breakpoint: 123px;
You have to override the responsive part of Bootstrap. I would not load bootstrap-responsive and load my own ones. Everything is defined in responsive*.less files.