In bootstrap button with class "navbar-toggle" in navbar appears when screen less 768px, i.e. 767px. But but ipad mini has screen with dimensions 768-1024px.
Should i override bootstrap style from 768px to 992px, like this:
#media (min-width: 992px){
.navbar-toggle {
display: none !important;
}
}
You should not change the bootstrap file itself, but it would be advised if you really need to do this to add the extra dimensions to your own custom css file which will over-write the bootstrap lib file.
Its perfectly ok to overwrite bootstrap but personally i would specify the MIN and MAX width to ensure you are catering for that particular edge case.
http://getbootstrap.com/2.3.2/scaffolding.html
At bottom of the page you can see classes like .visible-phone, .visible-tablet, .visible-desktop and their behavior at some sizes.
Related
I have a following code :
<div class="row">
<div class="hidden-xs">
<h1>Hello</h1>
</div>
</div>
and I expect it to be invisible when width will be smaller than 480px as it's default value in bootstrap css files. However, using Google Chrome simulator it becomes invisible when I set width smaller than 768 - so it works like hidden-sm. When I change hidden-xs to hidden-xs-down it always stays visible.
What I do wrong ?
First of all you should double or triple check that your page loads jQuery before anything else. After that should follow the Bootstrap's JS and CSS libraries.
Bootstrap's default class hidden-xs should work just fine if the framework is able to load correctly, no changes to any CSS or JS required at any point. I would also like to mention that hidden-xs-down is not Bootstrap standard, and that explains why it does not work.
What comes to the default breakpoints, 768px is actually XS, while 992px is SM and so forth.
In case you want the div to disappear when the width is below 480px, you should create your own class. To do so, just put the following to your CSS:
#media (max-width: 480px)
{
.hidden-xxs { display: none; }
}
I struggle to set website CENTER and RIGHT columns width correctly, but only between a screen width of 768px and 1140px, the following width-override via template.css is not effective at all:
#media (max-width: 1140px) and (min-width: 768px)
{
.row-fluid .span8 {width: 80%;}
}
For all other screen widths, the standard settings from bootstrap.min.css work just fine. Override file name is template.css, Joomla 3.5 CMS. See the site here: http://www.alphaseeker.de
Thanks in advance, let me know any further details you may need.
You can simply add this line to bootstrap.min.css file, and this rule will work fine!
I am trying to make my opencart responsive. I followed the instructions from here: How can i make my current opencart theme responsive?
but every time I want to change something in mobile.css it affects desktop.css. For example I put #footer{ display:none;} in mobile.css but as a result it kills footer in desktop and tablet.
Do I miss anything?
The mobile.css will still affect other screen sizes. Wrap your desktop.css with this:
#media (min-width: 970px) {
}
To display the footer add this to the desktop.css (within the media query above):
#footer { display: block; }
Based on your comment above it looks like you should change "max-width" to "min-width" in the media query on desktop.css.
I'm working on this site:
http://stephaniebertha.com/indev/solartrak/
And I seem to be having a problem with breakpoints and general width responding to the layout. When you resize it and it starts to get down to 780 width, the layout breaks and it looks weird (the menu goes to a light gray color).
These are my media queries in custom.css (and in this order):
max-width: 480px
min-width: 481px
min-width: 769px
Is this correct? Should I be doing them in this order? Any help you can throw my way would be helpful. Thank you!
I think you need to reorganize your css thinking better the rules which ones you want for all devices sizes and which ones you don't
Example
in your custom.css you have this rule
#media only screen and (min-width: 769px) {
.navbar-default {
background: none;
border: 0 !important;
}
header.main {
height: 42px;
background: #f7941d;
}
the color of the nav bar shoul not be inside a #media rule thats why your nav get grey is smaller screens
and also read the documentation of the bootstrap grid it will help you a lot
Breakpoints for Bootstrap 3 can be customized here:
http://getbootstrap.com/customize/
Under the headings 'Media queries breakpoints' and 'Layout and grid system'... It's a good idea to use a custom version so that you're choosing which files are relevant to you, and are compiling your own custom build of Bootstrap.
You can look inside your bootstrap.css file to find out where the breakpoints are set. If you use the same ones in your stylesheet the breaks should match up!
// Your link isn't live any more so I'm afraid I can't answer questions about that.
Here is a live example.
For the big resolutions, it works fine - you will see the 'popular products' at the bottom all in one row.
But if you resize your window to say 800 x 600, and scroll down you will see all the thumbnails in 1 column.
How can I get that to be in 2 columns? Or does Bootstrap not support that?
i.e. I don't want to have to change any of the logic in the default CSS files - I just wanted to see if I was doing anything wrong.
Thanks.
I am afraid you cannot get two columns in the mobile version with pure Bootstrap. The default media queries rearrange any .spanX in one single column:
#media (max-width: 767px) {
...
[class*="span"] {
float: none;
width: 100%;
...
}
}
And nesting an .spanX within another .spanX doesn't work either. What you could do is to extend the default Bootstrap classes with an special version of .span2 for your purposes:
http://jsfiddle.net/LPsQy/
The new .my-span2 behaves as a regular .span2, but for the mobile media query works as a fluid .span6 (takes ~50% percent of the width).
I think it is not trivial to do it without changing Bootstrap's CSS on your own. If you cannot do it nice, here is the ugly solution:
Generated custom Bootstrap without responsive "Narrow tablets and below (<767px)" option. Lets call it Big.
Generated custom Bootstrap with only one media (I choosed "Tablets to desktops (767-979px)"). Lets call it Small.
In Small CSS I removed lines: #media (min-width: 768px) and (max-width: 979px) {, #media (max-width: 979px) {, and their closing brackets }. These are grid system and navbar.
Create your own CSS with following content:
Your new css/bootstrap.css
#media (max-width: 767px) {
... paste Small CSS here ...
}
#media (min-width: 768px) {
... paste Big CSS here ...
}
See example.
Note 1: It may still be not exactly what you want, because bellow 767px the grid system is fixed 2-columned and you may prefer fluid 2-column.
Note 2: Some more changes are required cor hidden-* and visible-* classes to work.
Note 3: You can take some time to diff the CSS files to see what really differs them.
Bootstrap was created to make easy solution to common problem. If your problem is not common, then the solution will not be easy ;) In your case you need to recreate your own CSS by selecting some parts of Bootstrap's...