Centering bootstrap images for tablets and smartphones - image

Question

I'm currently building a site with bootstrap on which I combine an image and a text block in each section and switch left/right every time. It looks like this and I used pull-left and pull-right for the images to keep them on the outer border aligned with the text below:
<div class="container-fluid standard-element">
<div class="row">
<div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-left" alt="Responsive image"></div>
<div class="col-xs-12 col-md-6">
<h2>Headline</h2>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="container-fluid standard-element">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2>#Agile</h2>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
</div>
<div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-right" alt="Responsive image"></div>
</div>
</div>
The problem is now that the images are alway left aligned as soon as they hit the tablet portrait breakpoint when they stack over the text blocks. How can I center the images as soon as they are now longer next to the texts but stacked above/below them?
Thanks in advance,
Tim

Answer 1

you'll need to use media queries to target the desired cutting-point, like (say) 768px. Then add something like this (in this case, I'm cutting for iPad)
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.pull-left, .pull-right{margin:0 auto /* change the 0 to your liking */; display:block; float: none}
}
EDIT: while the above could be useful for you on certain situations, I have noticed your problem is the HTML markup, and can be easily solved (plus a couple CSS lines).
HTML:
<div class="container-fluid header">
<div class="col-xs-12 col-md-12">
<img src="http://herbigt.com/doyouevenproduct/img/Placeholder_HeaderIcon.svg" class="img-responsive center-block header-image" alt="Responsive image" />
</div>
<div class="row">
<h1>Lorem Ipsum</h1>
<p class="lead">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam.
<br />Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="container-fluid standard-element">
<div class="row">
<div class="col-xs-12 col-md-6 imagebox">
<img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" />
</div>
<div class="col-xs-12 col-md-6">
<h2>Headline</h2>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="container-fluid standard-element">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2>#Agile</h2>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
</div>
<div class="col-xs-12 col-md-6 imagebox">
<img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" />
</div>
</div>
</div>
CSS:
/*Elements*/
.header {
background-color: #95d1c4;
text-align: center;
padding: 2.5em;
}
.header-image {
padding: 0.5em;
}
.lead {
padding-top: 1.0em;
font-size: 2.8rem;
}
.standard-element {
margin-top: 5.0em;
margin-bottom: 5.0em;
margin-left: 3.0em;
margin-right: 3.0em;
padding-bottom: 5.0em;
border-bottom: 2px solid;
border-color: #EEEEEE;
}
.img-section {
border: 1px solid red;
}
.last-element {
border-bottom: none;
}
.footer {
background-color: #95d1c4;
color: #ffffff;
text-align: center;
padding: 1.5em;
}
/*Typography*/
h1, h2, h3, h4, h5, h6 {
font-family:'Source Sans Pro', sans-serif;
color: #E85C41;
}
h1 {
font-size: 4.8rem;
font-weight: 900;
}
h2 {
font-size: 3.8rem;
line-height: 7.0rem;
font-weight: 700;
}
p {
font-family:"chaparral-pro", serif;
font-size: 2.0rem;
font-weight: light;
color: #464646;
}
a, a:visited {
font-family:"chaparral-pro", serif;
text-decoration: underline;
font-size: 2.0rem;
font-weight: light;
color: #464646;
}
a:hover {
font-family:"chaparral-pro", serif;
text-decoration: none;
font-size: 2.0rem;
font-weight: light;
color: #464646;
}
ul {
font-family:"chaparral-pro", serif;
font-size: 2.0rem;
font-weight: light;
line-height: color: #464646;
text-indent: none;
}
.imagebox {
text-align:center
}
.imagebox img {
margin:0 auto
}
/* Media Queries */
/* Tablet Portrait*/
#media (max-width: 768px) and (min-width: 481px) {
.pull-left, .pull-right {
margin:0 auto;
display:block;
float: none !important;
}
.standard-element {
border: 1px solid red;
}
}
/* Mobile */
#media (max-width: 480px) and (min-width: 0px) {
.pull-left, .pull-right {
margin:0 auto;
display:block;
float: none !important;
}
.standard-element {
margin-left: 0em;
margin-right: 0em;
border: 1px solid red;
}
h2 {
line-height: 3.5rem;
}
}
Explanation: we're removing the pull-left and right classes and simply using the default Bootstrap columns behavior. Then we simply add an .imagebox class so we can target it and center the images. As simple as that.
Note: while might look minor, I've noticed you're not closing some of your tags. To the very least, your pages will never validate (in case that is a problem for you), so remember to use tags the XHTML way so if you don't get errors in validation that aren't really there. Images should go like this: <img src="your_image.jpg" alt="" /> and BREAK goes like this <br/> (note the trailing slashes).