I am using bootstrap for my home page layout. I have got one column of 9 units for my content and one 3 units column for my sidebar. The div inside the sidebar is position:fixed. For smaller screens bootstrap send my side bar to the bottom, that is ok. However, at that moment I need my sidebar position relative.
I am using JavaScript to check the width of the screen to change the position property, but I am guessing that bootstrap is going to send my sidebar to the bottom when the screen is lesser than 972px. How can I really know the accurate width which bootstrap will send my sidebar to the bottom? Appreciate any help? Thanks. Other approaches are welcome.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div class="content"></div>
</div>
<div class="col-md-3">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
The script:
$(document).ready(function () {
if ($(window).width() > 972) {
$('.sidebar').css('position', 'fixed');
}
});
On the Bootstrap front page it has the info for this.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
There is also the xs which is < 768px.
To get full control use all lg, md, sm and xs, and set what you want for each device/screen size.
Just using one like lg will allow things to change when resized.
Adding a Fiddle to help re your second question.
I have set up a full screen Fiddle for you, resize the window and see how the two areas stay side by side when you resize.
That is controlling it as you want I think.
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-success block">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block">
</div>
Added
Hit F12
The bootstrap breakpoint you are using is md (Medium devices).
So when the screen width is >= 992px it will be side-by-side with your main content div. When it is <= 991px it will drop below.
http://getbootstrap.com/css/#grid
Related
I am creating multiple dynamic divs of fixed height inside a main div. I can't change the fixed height to % height because it has to have a fixed height even if its empty because user drags elements onto these divs afterwards. Now i am using the Full Screen API to enlarge the main div to full screen. and i want the inside divs to grow their height as the screen enlarges.
On Small Screen it looks like this
On Full Screen it looks like this
on full screen the inside divs adjusted their widths accordingly because they have taken widths % vise but the height of divs doesn't increase because its fixed pixels. The red area in the second image shows the empty space when in full screen mode. how could this area be taken by the divs
The actual code of this is too much complex and lengthy so i am writing here a sample code to understand the problem
<div id="main">
<div Class="Row">
<div Class="Col-md-6">
<div id="A" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="B" style="height:100px;width:50%">
</div>
</div>
</div>
<div Class="Row">
<div Class="Col-md-6">
<div id="C" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="D" style="height:100px;width:50%">
</div>
</div>
</div>
Like i said that divs A,B,C and D are created dynamically. Now i apply a full screen function on main div
var element = document.getElementById("main");
element.webkitRequestFullscreen();
The main div gets to Full screen but the divs A,B,C and D do not adjust their height accordingly.
write a media query like this->
#media screen and(min-width:fullscreenswidth) {
.yourdiv {
height:100vh;
}
}
The fullScreenWidth is the size of the screen in pixels
I know that framework7 is designed for phones and tablet but is there a way to include or somehow tweak the css to make it compatible for desktop?my scenario is i have two div elements that i want to view side by side on desktop.
<div class="row">
<div class="col-50">panel-1</div>
<div class="col-50">panel-2</div>
</div>
But on tablet/phone view i want it to view both as 100%
<div class="row">
<div class="tablet-100">panel-1</div>
<div class="tablet-100">panel-2</div>
</div>
I tried below but the documentation said tablet class is for window width >= 768px, so the width is 100% even on desktop view.
<div class="row">
<div class="col-50 tablet-100">panel-1</div>
<div class="col-50 tablet-100">panel-2</div>
</div>
I am thinking of adding a custom css like desktop-XX, but how can i add it and overwrite the current grid system? Any suggestion would be great thanks in advance!
#media (min-width:768px){
.col-50{
width:50%;
}
}
this should work
I have try css transform, zoom, jquery... about 10+ demos and libraries to zoom/scale content most of them are for images...
Initial js
var hew = $(window).height();
var hes = hew - 100; // 100 is the total height of .margins-heads
$(".wrapper").css({height: hes, overflow: 'hidden'});
Initial html
<div class="container">
<div class="row clearfix margins-heads">
<div class="col-sm-3">Some logo</div>
<div class="col-sm-9">Menu...</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">Side navigation</div>
<div class="col-sm-9">
<div class="center-content">
<div class="wrapper">
<div>Content single img and name</div>
<div>about a hundred of this div's...</div>
<div>You get the picture...</div>
</div>
</div>
</div>
</div>
</div>
so usually the height for .wrapper is gonna be 548px unless you have a huge monitor it could be 700px height... the point is that everything inside .wrapper has to be scaled to fit in there, now, every element inside has a width of 10% with the image height of 60px max...
I have use transform: scale(0.7); but the thing is that the value has to be dynamically base on the height of the div.wrapper ... and there is where I'm stuck... I have try Zoomooz.js, but that only zooms in and it doesn't scale the content to fit my div.wrapper ... any help would greatly appreciated...
** Update
https://fiddle.jshell.net/4ww87obb/1/
You can use vw or vh to make your page responsive. Ex:
width:100vw;
this maximizes width based on the width of your browser. Vh changes the attribute based on the height of your browser.
I have my own website
However, on resizing it, I see the options on the navbar going up and down, depending on window size, what is the problem? How do I fix it?
Simple fix is to change the .container to a .container-fluid:
<div class="container-fluid">
<div class="navbar-header navbar-right">
...
</div>
</div>
This will resize the container and not make it have fixed width.
I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?
Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!