Is it possible to remove the middle two breakpoints in Bootstrap 3 and have the browser visually "scale/shrink" the page, so in those breakpoints you don't have to scroll left or right to see the page?
Basically, I have a design that I want to be responsive, but only be responsive for the small breakpoint and the large breakpoint, but I don't want a viewer to have to scroll left or right to see all the content.
Here is an example that I'm working on that doesn't work. I've tested on the iPad and I have to scroll around left and right to see the content:
http://matthewtbrown.com/test/myprojects.html
Just checked your code via Developer Tools, you're using container-fluid for the parent container.
When using container-fluid you should use row-fluid instead of row.
We use row when using container and row-fluid when using container-fluid.
It should be something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
Related
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>
I am a newbie, trying to create a simple grid layout using jquery mobile version 1.4.5 learning from jquerymobile demo . Either it is 2 or more column grid layout, last div element never align vertically with others unless it's width is reduced. Here is my 2 column grid layout code
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div>
<div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
http://jsfiddle.net/j43xh6k3/ . The second div will align vertically after resizing it's size to around 40% from 50%. This problem exist also with more than 2 column grid layout. After searching stackoverflow I came across this http://jsfiddle.net/Ltx2md34/1/ , which uses jquery mobile version 1.4.2. and is what I want to achieve. So, I tried changing version of Jquery mobile in my code but the problem didn't solve.Please help me understand where I have done wrong *Sorry for my bad English
I got rid of the problem by removing the white space and carriage return between the two enclosed divs:
First I did this:
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div><div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
And then re-indented back to:
<div class="ui-grid-a">
<div class="ui-block-a"><textarea></textarea></div>
<div class="ui-block-b"><textarea></textarea></div>
</div><!-- /grid-a -->
Maybe there's a hidden character in their somewhere messing things up.
I'm trying to implement a fixed nav bar, but after certain screen size (~width:989),
the nav bar moves down. It doesn't work on mobile either.
Image:
The navbar is completely stuck to the footer instead of staying on top of the page.
You can check the code at: http://www.lostsavings.co.il
You have a few other issues, but the major issue is that the nav-fixed-top content is at the bottom of the page right now... in other words, you have:
<div class="container"> content here </div>
<div class="navbar"></div>
<div class="footer"></div>
Move that navbar to the top of the natural document flow, as if you were using no bootstrap, jquery, etc...
<div class="navbar"></div>
<div class="container"> content here </div>
<div class="footer"></div>
You'll have to fine-tune quite a few margins, etc... and I see a few !importants that could be getting in the way, too, but I'm guessing some of that has been part of your attempt to troubleshoot this. Making the above change at least made the navbar appear at the top for me.
i am trying to realize a layout with bootstrap.css. It is especially a main view with a right sidebar. It looks great on the desktop, but i am trying to remove the sidebar when i have a mobile view.
Currently my layout looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
Main view goes here
</div>
<div class="span3 visible-desktop visible-tablet hidden-phone">
Sidebar goes here
</div>
</div>
</div>
So when i have a mobile view, the sidebar disappears. But the main view still has a span9 class, causing the whole view having some whitespace to the right. I am currently experiencing this on an iPhone 4 with mobile safari.
I am no css guru and i mainly work on the backend of webapps, but this time i just want to do it right, because it is for my personal blog. You can check out what i mean with this "whitespace" at my blog. I know that the navbar isn't pretty at all now, but this will be the next thing i'll fix.
Check it on www.responsinator.com
I guess there is no such white-spacing to the right. Moreover row-fluid class of bootstrap converts every child span class to full width when the site is opened on any other device except for desktop. So in any case, the width:100% is assigned to span9 when you open it on iPhone4.
There seems to be a little space on the right cuz of two reasons probably:
1. Text is not justified.
2. container-fluid adds a padding of 20px to the left as well as right.
Hope it helps. :)
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS