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; }
}
Related
I've been working with tailwind in my Vue project and overall its really good, but its a bit annoying to always write sm:w-10 lg:w-10 2xl:w-30 (etc) for all of my classes.
So I was thinking, since the width is based on rems, wouldn't it make more sense to just update the root font size (which determines rem value) at the lg xl 2xl breakpoints, rather than resetting them on each tag?
I think I could achieve that with something like this on the root component:
html { // changed from body to html
font-size: 16px;
#media screen and (max-width: 1024px) {
html {
font-size: 24px;
}
}
But I'm skeptical about doing this as the Tailwind docs don't mention it at all. Can anyone tell me if/why this would be a bad idea?
Just add it to the parent class then everything under applies the same text modifiers.
Eg below increases the size of text as the screen width goes up for all child divs
<div class='text-base md:text-lg lg:text-lg xl:text-xl'
... All text content inside here will responsively change size
</div>
See below links for more info
Font Size
Responsive Design
I've just updated from Bootstrap 3.2.0 to Bootstrap 3.3.1. I'm also using the DataTables-Plugin and therefore, I'm using dataTables.bootstrap.css and dataTables.bootstrap.js, respectively.
With version 3.2.0 I didn't have any problems, so far. With version 3.3.1 all tables are slightly scrollable in the horizontal direction (see screenshot).
I've got the table within a <div class="table-responsive"> tag. So normally, the horizontal scrollbar should be displayed on smaller screens but not by default.
Any ideas?
This works for me
In Bootstrap v3.3.4 bootstrap.min.css .table-responsive {min-height: .01%; overflow-x: auto;}
is causing the problem
So instead of changing in bootstrap core css file (As it is not recommended)
I edit following lines of code in my custom css file to override bootstrap css
.table-responsive {
overflow-x: inherit;
}
This will solve the issue.
The tables produced by DataTables are configured to be responsive already. So you don't need to enclose them in a bootstrap "table-responsive" div.
Your code might look like this:
<div class="table-responsive">
<table class="table" id="myTable">
.... blah blah ...
</table>
</div>
Then later in javascript you make it a responsive DataTables table:
$('#myTable').DataTable({ responsive: true });
This is redundant and causes the extra scroll bar. Just remove the table-responsive div.
Any of the answers is working for me.
I could fix it adding a width="100% !important" to the table.
.table-responsive table{
width: 100% !important;
}
I do need the table responsive class for mobile web responsive. So, what I do is creating a CSS class with #media only like this:
#media only screen and (min-width: 968px) {
/* disable responsive in desktop */
.disable-in-desktop {
overflow-x: inherit;
}
}
Then I call the .disable-in-desktop next to table-responsive, so it looks like:
<div class="table-responsive disable-in-desktop">
Conclusion:
Now, the responsive class will only work on a mobile screen, because I disabled it on the desktop screen. So the horizontal scroll doesn't occur anymore.
Sorry for the bad English language.
I have yet to find a great answer for why this is occurring. It looks like, for me at least, DataTables is creating the table 1-3 pixels wider than the container. This is always yielding an active horizontal scroll bar. I didn't want to disable the ability to have a responsive table at other resolutions or even lock it into certain sizes, so here's my solution:
$('#dataTable').DataTable({
drawCallback: function(settings) {
// fix to remove unnecessary width
let $table = $(this);
let diff = $table.parent().width() - $table.width();
if (diff > 0 && diff < 3) {
$table.width($table.width() - 4);
}
}
});
Now every time the table is resized, it will make sure the table is 4 pixels smaller than the container it is in, but only if it is within 3 pixels of the parent container. This will still allow it to be responsive at smaller screen sizes, but resize the table a few pixels when it is barely oversized.
put this in your custom.css, the datatable auto generate .row is affecting the scroll bar when is autoflow-x..
#example_wrapper .row{
margin-right:0px;
margin-left:-15px;
}
I'm building a responsive layout using the responsive grid system. Once the screen scales below 480px all my elements stack on top and take up 100 percent of the page width. This is great for mobile devices. Images however seem to get in the way and I would like to simply remove them once the screen scales below this value.
I'm using the #media function. Thanks for the tips
You can use the display:none; attribute in css.
Example:
#id_of_image {
display:none;
}
Use this in your #media.
What's wrong with:
#media (max-width: 480px) {
img { //or some specific element
display: none;
}
}
If you use CSS you're still downloading the images, and there's really no need for that if you can avoid it. You're better off checking for the device on the server, and, if it's a mobile device just omitting the tag from the page. You can use the Mobile Detect library for this, and then your code would look something like
<?php if($device != 'mobile'): ?>
<img src="">
<?php endif; ?>
http://mobiledetect.net
Of course, you can use display:none in your CSS as a fallback... :)
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.
I'm using Twitter's bootstrap (responsive) css in my application. I want to have banner ads in my sidebar but depending on which media query is active my sidebar will be a different width meaning that my banner ad will also need have a different width.
How would you suggest that I go about swapping out banner ads depending on the currently active media query? I know that I could use jQuery to watch for changes in the browser's widths and swap them out that way but is there an existing solution out there somewhere like a jQuery plugin?
This is essentially already built in to Twitter Bootstrap. Bootstrap has a few classes called .visible- and .hidden- which are used in conjunction with phone, tablet and desktop to show and hide items on different devices.
You would then simply include X different versions of your banner, for example:
<div class="ads">
<img class="visible-phone" src="smallest.png"/>
<img class="visible-tablet" src="medium.png"/>
<img class="visible-desktop" src="large.png"/>
</div>
Of course, if you wanted to set custom css properties for the media queries then you can add your own ones. This is how Bootstrap does it:
#media (min-width: 768px) and (max-width: 979px) {
.visible-tablet {
display: block;
}
...
.visible-desktop {
display: none;
}