Reputation: 4738
I am trying to create a responsive design here http://bloggingtopsecrets.com/development/testblog/ but unfortunately not able to keep the "services" div elements in same row (all 3 should be in same row). Right now one of them is coming to new row which is making the .all-posts class to be on right hand side. How to fix this keeping the responsiveness of the theme ?
here is the jsfiddle code http://jsfiddle.net/icyborg7/b53zN/1/ (though you can check the whole site from above url too)
.all-posts {
background: none repeat scroll 0 0 #EBEBEB;
float: left;
margin: 0 0 0 11px;
width: 343px;
}
.services {
float: left;
margin-right: 20px;
margin-top: 30px;
text-align: center;
width: 358px;
}
Thanks
Upvotes: 0
Views: 103
Reputation: 9460
Hope this helps HTML
<div class="wrapper">
<div class="services">
<img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/design.png">
<h1>DESIGN</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="services">
<img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/consultancy.png">
<h1>CONSULTANCY</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="services" >
<img src="http://bloggingtopsecrets.com/development/testblog/wp-content/uploads/2013/12/maintenance.png">
<h1>MAINTENANCE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="all-posts">
<h1 class="entry-title">
<a href="http://example.com" rel="bookmark">Example 0</a>
</h1>
<h1 class="entry-title">
<a href="http://example.com" rel="bookmark">Example 1</a>
</h1>
</div>
CSS
.wrapper
{
margin:0px auto;
width:1200px;
padding:0px;
}
.all-posts {
background: none repeat scroll 0 0 #EBEBEB;
float: left;
margin: 0 0 0 11px;
width: 343px;
}
.services {
float: left;
margin-right: 20px;
margin-top: 30px;
text-align: center;
display:inline-block;
width: 358px;
}
Fiddle http://jsfiddle.net/b53zN/12/
Upvotes: 1
Reputation: 2917
Try,
<div class="services" style="display: inline-block; width: 20%;">
<div class="services" style="display: inline-block; width: 20%;">
<div class="services" style="display: inline-block; width: 20%;">
Remove float:left
and change width: 125px !important
in .service
class
Upvotes: 1