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
Related
I built website on divi for a while now. I tried many times to change Divi built in responsive settings.
Most of my bugs are on effects, like moving up and down according to screensize; when it work out on a 13 inch it's totally messed up on a 27 inch
But my main problem is that the phone version goes from 320px up to 768px which is not adapted for little tablets.
I'ld like to change that built in breakpoint settings to something like 500px max for mobile version and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
Do you have any idea ?
If there is no solution through divi builder, is there any chance to do something through CSS ?
I've tried to reach Divi's expert on Malt but they were not able to answered me.
I've tried some CSS but it didn't work out. I know that it is possible to customise some sections, row, column to a specific screen size and sometimes I managed to do what I want sometimes thanks to that.
I also tried to look at the .php files but I've to say : I'm not an expert... and didn't find anything.
I was expecting to be able to customise divi's breakpoint with my own value.
To do something like that : I'ld like to change built in breakpoint setting to something like 500px max and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
I've been having the same problem for years now. Divi doesn't really seem to care at all about the fact that responsiveness has become a lot more complicated than just two breakpoints. I haven't found any helpful plugin or extension that's free.
You might want to look at this one: https://www.peeayecreative.com/product/divi-responsive-helper/ I haven't bought it myself but it seems to have everything I want to customize the breakpoints.
But still today I just use CSS in the Theme Options of Divi to create my own breakpoints.
For example, the menu changes to a hamburger at 980PX but this screws it all up 'till you get to about 1200px. So in the CSS is use this:
#media(max-width:1200px){
.et_pb_menu__menu {
display: none !important;
}
.et_mobile_nav_menu {
display: block !important;
}
}
Also, Divi tends to hide empty columns, even if the heave a background and a set height. So I always give those columns a class of divi-hidden-100pr or divi-hidden-50vh depending if you can set the height on percentage or if need need to set the height yourself. Then in Theme Options this is my CSS:
#media(max-width:1200px){
.divi-hidden-100pr,
.divi-hidden-50vh {
display:block !important;
}
.divi-hidden-100pr {
height:100% !important;
}
.divi-hidden-50vh {
height:50vh !important;
}
}
In this case the heigt is 50vh or 100% you can set the 50vh to whatever you prefer.
Maybe the reason why your CSS didn't work is because you did use !important
I know that it's a CSS crime to use this, but Divi doesn't seem to care and uses this a lot. So if you don't use it, your CSS probably won't work.
Problem however with this custom CSS, you'll still get you're margins, paddings, font-size etc set for the desktop. So pretty soon you custom CSS in Theme Options wil grow bigger and bigger and you'll have to change some desktop design settings to make your responsive custom CSS work
For example:
If you want a different font-color on a device you should set the font color for desktop in the custom CSS part of the module, not in de Design tab. If you set it in the Design tab it will bet set with !important and no matter where you put you're custom responsive CSS, it wil always be overruled by the Divi settings.
hope this helpen you a bit. Hope Divi will realize soon that there's more than 5 devices out there with different sizes.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
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
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 was wondering how would I make a asp.net drop down list responsive. And by that I mean when I am on my smart phone it will format its width to fit the screen, and when i am on a tablet it would do the same and so on.
Any examples would be great.
Thanks for the help
Step 1: Add one or more CSS classes
You'll need to start by adding a CSS class to the dropdown list control (hereafter referred to as 'the control'). This can be done by adding one or more classes to the CssClass attribute in the control. Additionally you should take a look at conditional CSS statements.
Step 2: Add the usual responsive design styles to the class
A basic responsive design style is something like this
.responsiveWidth{width:100%;max-width:950px;min-width:650px;}
Things to remember...
Just remember that when using max- and min-width, it is expected that if you use a percent for width , then you should use an explicit width for max-width and min-width. This goes both ways, so you could do:
.reponsiveWidth{width:900px;max-width:100%;}
...which would keep the control at 900px width unless the screen width drops below 900px.
Bonus Info:
Here are some links that I have in my "Responsive Design" folder in my bookmarks...
Tips
7 Responsive Design Tips to Enhance Your Workflow
How to use conditional CSS statements
5 Useful CSS Tricks for Responsive Design
References
W3C CSS Conditional Rules Module Level 3
Advanced Conditional Statements
Give it a css class and set the width to a relative size. (100% for example)