Why is my bootstrap v3 column not 100% wide on my mobile phone? - twitter-bootstrap-3

I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.

The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content

Related

Does Owl Carousel Really Work without a fixed width?

I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.

Bootstrap Overflow not aligning properly

I have a page I'm making where where on small screens (ie: phones) I want the image above the text, and on larger screens I want the image to the right of the text.
I'm using offset to pull the image right on larger screens. However, it's not aligning properly on larger screens (smaller screens are just as I would expect). The text on the left doesn't start until after the image on the right. I haven't used the offset feature of bootstrap before and I'm not quite sure what I'm doing wrong...
Here is a screenshot (unwanted gap marked in yellow)
And the code...
<div class="row">
<div class="col-md-4 col-xs-12 col-md-offset-8">
<img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">
</div>
<div class="col-md-8 col-xs-12">
<?php echo nl2br($p['desc_landing']); ?>
</div>
</div>
Any help appreciated!
Heyho,
what you are doing with col-md-offset-8 is pushing the image to the right with a margin, thus filling the whole line with this column.
The math: 4+8=12
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
Your Picture
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
Your text
</div>
You can solve this via push and pull. So on medium screens your text will show "first" on the left side with ratio 8/4. Then on smaller screens it will go to normal order where the picture is on the top and the text beneath. Hope that helps :)
Oh, for test reasons i put col-sm. Otherwise you cant see the result in the preview :)
Greetings

bootstrap 3 grid not side by side but below

I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">

Bootstrap 3: Offset isn't working?

I have this code:
<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>
What I want for small (sm) screens is to have two divs that have three columns each, and an offset of 6 columns for the first div.
For medium (md) screens, I would like to have two divs with twelve columns each (one horizontally stacked under the other), with no offsets.
Somehow the browser doesn't recognize the class col-md-offset-0. It still uses the col-sm-offset-6 class. Any ideas why?
Which version of bootstrap are you using? The early versions of Bootstrap 3 (3.0, 3.0.1) didn't work with this functionality.
col-md-offset-0 should be working as seen in this bootstrap example found here (http://getbootstrap.com/css/#grid-responsive-resets):
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
There is no col-??-offset-0. All "rows" assume there is no offset unless it has been specified. I think you are wanting 3 rows on a small screen and 1 row on a medium screen.
To get the result I believe you are looking for try this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>
Keep in mind you will only see a difference on a small tablet with what you described. Medium, large, and extra small screens the columns are spanning 12.
Hope this helps.
If I get you right, you want something that seems to be the opposite of what is desired normally: you want a horizontal layout for small screens and vertically stacked elements on large screens. You may achieve this in a way like this:
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>
On small screens, i.e. xs and sm, this generates one row with two columns with an offset of 6. On larger screens, i.e. md and lg, it generates two vertically stacked elements in full width (12 columns).

Resize Foundation's Orbit Slider

Good Morning!
I'm working on a prototype and I would like to know the "proper" way to change the width of Foundation's Orbit Slider yet still keep it's responsiveness.
Currently - I had changed the width of the slider container to a smaller percentage (73%) - but when viewed at mobile size, it just doesn't seem quite right. Not to mention the arrows have floated upwards and I'd rather not hack some css to get them positioned correctly.
Orbit CSS: http://naivestudio.net/win-prototype/prototype/orbit.php (put on separate page just for this question - changes will be made in the app.css file)
HTML in Index Page - Note the video is outside of the slider, but I will have it floated next to it in the header container.
<div id="headcontain" class="row">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div>
<img src="http://placehold.it/235x300&text=Video">
</div>
Javascript
<!-- Include Orbit -->
<script src="foundation/javascripts/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
window).load(function() {
$("#featured").orbit( {
timer: false
});
});
</script>
the proper way to resize an orbit slider is to wrap it in a div with a class specifying how many columns you'd like it to stretch across. By changing the number of columns the container stretches across, the framework will then automatically resize the slider. If you're using foundation 4 or greater you'll need to use their new syntax of "large-(#)" or "small-(#)" when specifying the number of columns.
You had said that on small resolution it looked incorrect, if you're using Foundation 4+ you can use a combination of both large and small size calls to affect how it appears on both large and small resolutions; the following example will span twelve columns on a large resolution and only span 3 columns when you reach a smaller resolution.
Situational Resolution Sizing Example for Foundation 4+:
<div class="large-12 small-3 columns">
Full Example for Foundation 4+:
<div id="headcontain" class="row">
<div class="large-12 small-3 columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/large12-->
</div><!--/headcontain-->
Full Example for Foundation 3-:
<div id="headcontain" class="row">
<div class="twelve columns">
<div id="featured">
<img src="http://placehold.it/700x300&text=Slide1">
<img src="http://placehold.it/700x300&text=Slide2">
<img src="http://placehold.it/700x300&text=Slide3">
<img src="http://placehold.it/700x300&text=Slide4">
<img src="http://placehold.it/700x300&text=Slide5">
</div><!--/featured-->
<img src="http://placehold.it/235x300&text=Video">
</div><!--/twelveColumns-->
</div><!--/headcontain-->
Hope this helps!
As of v6.5.3 it appears that this still hasn't been resolved BUT it looks like there will be fix in v7. More info hero on Github.