I've recently began using Bootstrap and have not had any problems doing so except for this one issue I've run into. I've set up my own personal website using it and styled it to be responsive and so far it looks great on everything.
But the problem I am having is that from 980px - 1200px, Bootstrap renders the page in full-page rows (exactly as it does as if it were on mobile). I'm using bootstrap-responsive.min My page set up is:
<div class="row-fluid">
<div class="span3"> <!-- sidebar here --> </div>
<div class="span8"> <!-- content of each page --> </div>
<div class="span1"> <!-- empty for spacing --> </div>
</div>
980px-1200px is the only interval for which it renders correctly, and I so far have no media queries for that interval. Has anyone run in to this problem before? Or does anyone know what might be causing this?
A page example can be seen here (you will notice if you slowly resize the browser window):
http://portfolio.jrstrauss.net/work/
You have a media query targeting screen widths up to 979px,
#media (max-width: 979px) and (min-width: 768px)
And the next one is targeting screen widths of 1200px and up
#media (min-width: 1200px)
anything in-between 980px and 1200px will be using the default styles. You can fix this by changing the 2nd media query to have a min-width: 980px instead of 1200px.
[edit] It's something completely different: You need to rewrite/fix your HTML, e.g. you can apply .span3 to the header element, so it floats as intended. The same goes for your second block.
<header class="row-fluid" style="display: inline-block;">
<nav class="main span3">
…
</nav>
</header>
You basically did set the correct classes, but then added full-width block elements inside.
Related
While developing a web page it would be handy to see which sets of size classes are active: xs, sm, md, lg.
I've noted that there are some extensions that show the grid overlay, but not the size.
Is there a way to indicate which size sets are active?
With bootstrap 4.1 you can add something like this on your page.
The code below will show what is the current class used by bootstrap based on your screen width.
<div class="alert alert-info">
<div class="d-none d-xl-block font-weight-bold">X-LARGE (XL)</div>
<div class="d-none d-lg-block d-xl-none font-weight-bold">LARGE (LG)</div>
<div class="d-none d-md-block d-lg-none font-weight-bold">MEDIUM (M)</div>
<div class="d-none d-sm-block d-md-none font-weight-bold">SMALL (SM)</div>
<div class="d-block d-sm-none alert font-weight-bold">X-SMALL (Defaut)</div>
</div>
Bootstrap grid system has 4 classes
xs for mobile (Below 768px)
sm for tablets (Above 768 and Below 992)
md for desktops (Above 992 and Below 1200)
lg for larger desktops (Above 1200)
So, with this values. You can change the width and understand the class currently active now.
There is javascript solution :
Responsive Bootstrap Toolkit
If you want to detect current size set with css, you can create a css rule for body or any other element like:
#media only screen and (min-width: 1280px) {
.body-helper {background: green;}
}
#media only screen and (min-width: 992px) and (max-width: 1279px) {
.body-helper {background: pink;}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
.body-helper {background: maroon;}
}
#media only screen and (max-width: 767px) {
.body-helper {background: lightblue;}
}
Please use appropriate breakpoints of your bootstrap settings. So you can identify current size set with background change.
You can check your screen sizes or media queries break points through Developer Tools like on Google Chrome. You can check "Test Responsive and Device-specific Viewports" from Google Chromes Developer Tools.
you don't need any extention if you are using developer tools of chrome.
Just open Chrome developer tools by pressing F12
Resize window
You will see size of window at top-right corner.
Select Div in developer window for which you want to check which class is Active.
Resize window again.
you will see active class name will be visible in Styles pane of developer tools.
You could work with hidden columns. So you hidde a div in other screen-sizes.
Example:
<div class="col-lg-3"> <div class="visible-lg hidden-xs hidden-sm hidden-md">col-lg</div> </div>
Learn more: Scotch.io - Responsive Utilities
I used a method that might be silly, but it works great.
You can do something like this, which will show the size on screen, but since the size is 0 then it's going to hide it. (don't use visibility hidden 'cause it doesn't work)
<span id="theSize" style="font-size: 0;">
<span class="d-none d-lg-block">LG</span>
<span class="d-none d-md-block d-lg-none">MD</span>
<!-- and the rest of the sizes -->
</span>
and this is the code for checking the size in javascript.
if (document.getElementById('theSize').innerText == 'LG') //large
// do something
else if (document.getElementById('theSize').innerText == 'MD') //medium
// do another thing.
// for the rest of the sizes
else if ...
else if ...
else ...
I'm using an iPhone CSS device from https://marvelapp.github.io/devices.css/
However, I can't find an intelligent way to make it resize to fit within mobile devices. The only way I've found is by changing the meta viewport's initial scale, but that changes how the entire Bootstrap website appears on mobile, not just the mobile device obviously.
Is there a way to perhaps change the scale for the specific div within which the CSS mockup resides, or another way to make the device resize for mobile view?
A transform: scale() seems to work.
The scale could be set using JS based on the viewport width to make it fit the screen.
.small {
transform: scale(0.5);
}
<link href="//marvelapp.github.io/devices.css/assets/devices.min.css" rel="stylesheet"/>
<div class="marvel-device iphone6 silver">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
<div class="marvel-device iphone6 silver small">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
You must to do it manually using "medias" to determine how it should look in certain devices. Media Queries are useful to make breakpoints on viewport sizes to adjust content and view it properly on different screen resolutions.
The following example shows how a media query changes some existing values de .marvel-device.iphone6 and .marvel-device.iphone6 .sensor at a resolution of 320px wide.
#media only screen and (max-width : 320px) {
.marvel-device.iphone6{
width: 320px; /*Or the new width you want in pixels*/
height: 480px; /*Or the new height you want in pixels*/
}
.marvel-device.iphone6 .sensor{
left: 50px; /*Or the left position for the sensor*/
}
}
As I said before, I don't know an other better way to do it but manually, so you need to copy that code, and modify these values to fit the screen resolutions you want. Unless you could use transform for the whole .marvel-device
I would like to generate a fixed width col for big displays with bootstrap, but it should be reponsive if you use it on smaller ones.
<div class="container">
<div class="col-md-3"></div> <-- this should be fixed width 400px for big displays
<div class="col-md-9"></div> <-- content should be always responsive
</div>
Is this possible? Thanks
The best way to get a fixed-fluid layout in Bootstrap 3 is using #media query that works at the same breakpoint as the Bootstrap media queries. So, in your case use the 992px (md) breakpoint...
#media (min-width:992px) {
#sidebar {
min-width: 400px;
max-width: 400px;
}
#main {
width:calc(100% - 400px);
}
}
Bootstrap Fixed-Fluid Layout
You can do this
<div class="container">
<div class="col-md-3 fixed-size-1"></div> <-- this should be fixed width 400px for big displays
<div class="col-md-9 fixed-size-2"></div> <-- content should be always responsive
</div>
CSS
.fixed-size-1{
//specify height and width
}
.fixed-size-2{
//specify height and width
}
Use CSS media queries to add fixed width to them.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
you can add responsiveness by using
<div class="col-md-9 col-sm-9 col-xs-9"></div> <-- content should be always responsive
this will take 9 column in large tab and mobile screen
I'm finishing up work on this website and trying to finalize the positioning of the slider navigation; however, I'm struggling to get the position correct on approximately tablet width screens (550px-768px).
I think something is off with my media queries and sizing but I can't put my finger on why I can't lock the position down between that range!
Here's a link to the correct behavior. Any ideas?
Slider uses Cycle2, if it matters!
Sample HTML
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
<div id="sliderNav">
<div id="adv-custom-pager">
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
And CSS
#media screen and (max-width: 768px) and (min-width: 550px) {
#sliderNav {
bottom:145px;
}
.slidercaption {
height:250px;
}
}
I can't see anything wrong with the slider at that point.
To be honest when I add a slider to a website, I usually turn it off for mobiles and have just 1 image visible (to break the text up). The viewpoint is so small, people won't wait to watch for the slider to change unlike desktops when they could be reading something else and notice it change.
I am designing a web without meta viewport. I want to show my web on mobile as well as desktop.There is problem in the comperision of home(index) and inside page.Home page header and footer showing properly but on the inside page header showing good but not as well as home page and footer not showing properly in full width.Plz help me Thank you
there is problem only for mobile and tab
http://websum.in/prome/concepts.php
Please paste html code and css code other wise cannot full help you. And or your code show some example through codepen or jsfiddle I see you have not set any media queries for you need to set some media queries for mobile formats some where along those lines you should look into bootstrap to see how they are done.
I had a look in firebug on your website could not see any media queries
Example only
#media (max-width: 648px) {
.footercontainer {
width: 90%;
}
}
Edit: just realized you didn't say you use Twitter bootstrap. This example requires Twitter bootstrap, or you could fetch the Css classes from there.
What you could do is make sure the text blocks in the footer appear centered and underneath each other on mobile. Something like this:
<div class="footer">
<div class="row hidden-xs">
Desktop footer
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
Icons and stuff.
</div>
<div class="col-xs-12 text-center">
Copyright.
</div>
</div>
</div>