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
Related
So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.
What ideas could I use to achieve this?
You can use your own customized Bootstrap css (create one here)
instead of the original/regular one. In the 'Media queries breakpoints' section, just change #screen-xs, #screen-sm, and #screen-md to 1024px and then download the customized version.
Bootstrap is designed to be mobile first and scale up rather than down.
You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.
This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:
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.
https://www.codeply.com/go/g1dEHU6EOX
I use bootstrap responsive and either I am doing something wrong, or bootstrap is not so responsive as I would love it to be.
Below you see 4 possible states, and I would avoid the two in middle. Either everything is inline like in first case, or force bootstrap to be "mobile" like in case 4.
QUESTION Can I set minimum width in pixels on which Bootstrap will always be in this mobile look like shown in case 4?
I am using twitter bootstrap version 3
here is code responsible for navbar https://gist.github.com/andilab/c1eba569dd0b9b9ad280
case 1: OK
case 2: BAD
case 3: BAD
case 4: OK
Yep. Lots of ways to do it, but I think the easiest is to download a custom Bootstrap from http://getbootstrap.com/customize. Specifically see this note:
The navbar collapses into its vertical mobile view when the viewport
is narrower than #grid-float-breakpoint, and expands into its
horizontal non-mobile view when the viewport is at least
#grid-float-breakpoint in width. Adjust this variable in the Less
source to control when the navbar collapses/expands. The default value
is 768px (the smallest "small" or "tablet" screen).
And make that change here: http://getbootstrap.com/customize/#grid-system. In your case, you would change #grid-float-breakpoint: #screen-sm-min to #screen-md-min.
The bootstrap.css file contains #Media rules that define the min-width at which it swtiches to the mobile layout.
You shouldn't edit the bootstrap.css file directly but you could override the min-width in a custom CSS file.
The full and working solution should be focused on the resolution on which the navbar menu should be collapsed to: .
working demo http://www.bootply.com/98488 by #Skelly
The answer can be found here:
Twitter Bootstrap 3 navbar-collapse - set width to collapse
This may help.
http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
You can use responsive utilities classes.
For example in your header container you can add hidden-xs hidden-md hidden-sm and on most mobile phones and tablets your menu will be like in your case 4.
Hope this is what you were looking for.
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
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.
i want to create a flexible layout, but I have one div which has to have a fixed width of 1000px. the best solution i had was to center the div while there was enough space available but when the screen became 1000px or smaller in width, the div would float:left. I'm aware that I could do this using media queries, but im already using those for different dimensions right now and wanted to explore other options. Does anybody have any suggestions?
You're pretty much left with media queries or using some JavaScript. Media queries are really the best approach for this due to performance and their declarative nature.
You should make it responsive and that would be with media queries or in your css, you should set the size in percentage for it to adapt with the user interface size. Simply make it responsive