I am using Twitter Bootstrap. I have a btn-group. I want the btn-group and btn-group-justified classes added for screens at or above 768px, and the btn-group-vertical class applied for screens at or below 767px. How can I do this?
This is a jQuery implementation. If you can't change the IDs to classes on your buttons, this is probably the best way I can think of to do it.
$(document).ready(function(){
var changeWidth = function(){
if ( $(window).width() < 768 ){
$('.btn-group-justified').removeClass('btn-group-justified').addClass('btn-group-vertical');
} else {
$('.btn-group-vertical').removeClass('btn-group-vertical').addClass('btn-group-justified');
}
};
$(window).resize(changeWidth);
});
You can use bootstrap's utility class. (.visible-xs)
http://getbootstrap.com/css/#responsive-utilities
You basically create contents that will only be visible if current screen is below 768px. And then add the class you want.
Related
So I want to know how to set a Max Height Media Breakpoint in TailWindCSS Config.
IPad Pro's are recognised as Laptops because of their width.
That said, they are far too tall for Laptop CSS, making my site look horrible.
Any help welcome,
Thanks,
Justin.
I spit through the Tailwind docs, it seems like there are none for Max Height media queries.
But you can create your own Custom media queries. I don't known the height of an iPad Pro. But I made an example based on the docs. (Also untested example)
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'iPad': {'raw': '(max-height: 1234px)'},
// => #media (max-height: 1234px) { ... }
}
}
}
}
Edit:
I'm not sure what the output of this will be, my guess iPad:text-xl or something.
You can just apply it directly to the jsx element inline. for example
<div className='max-h-[1234px]'></div>
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.
As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.
My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).
This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.
class="col-xs-12 col-sm-6"
As #makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by #tsdexter:
$(document).ready(function(){
$('.somecontainer').on('resize',function(){
if ($('.somecontainer').width() < 640) {
$('.somecontainer').addClass('m');
} else {
$('.somecontainer').removeClass('m');
}
});
});
I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries
Just copy/paste everything into a separate scss file, activate it and you are good to go
// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
#mixin make-modal-grid-columns($breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
.modal {
// Overrules all .col css inside .modal-sm to a single col
.modal-sm {
#include make-modal-grid-columns((
xs: 0
));
}
// modal-md (no specific class is also modal-md)
#include make-modal-grid-columns((
sm: $breakpoint-sm
));
.modal-lg {
#include make-modal-grid-columns((
md: $breakpoint-lg
));
}
.modal-xl {
#include make-modal-grid-columns((
md: $breakpoint-lg,
lg: $breakpoint-xl
));
}
}
FYI: it generates 350 lines of code
I'm trying to use something like the boostrap framework to selectively choose which css class to apply to a given element, based on the window size.
For example, in bootstrap, is there a way to choose which class to apply based on which of the xs, sm, md and lg divisions the browser falls under?
Is there any easy way to do this? Do I need to use javascript? Should I look towards something other than bootstrap?
It sounds like you need a media query.
They will allow you to selectively apply styling depending on the window size.
For example:
#media all and (max-width: 1000px) {
.element {
color: blue;
}
}
The above would apply a color of blue to the text of any html tag which has a class of element ONLY when the screen size width is below 1000px.
you can use css media queries or use javascript like
$(document).ready(function() {
var hei = $(window).height();
var wid = $(window).width();
if (hei <= 640 || wid <= 360) {
$('element').css('property','value');
}
});