Thursday, 15 July 2010

Wordpress and Bootstrap Not Responsive -



Wordpress and Bootstrap Not Responsive -

good day, i'm having bit of problem getting bootstrap function wordpress. current theme working wonderfully, , seek implement bootstrap, isn't picking responsiveness... centers container! anyway i'll break files downwards , seek create them simple can follow.

header.php

<div class="container"> <div class="row"> <div class="col-md-12"> <header role="banner"> header related wp code. </header> </div> </div>

page.php

<?php get_header(); ?> <div class="row"> <div class="col-md-6"> body related wp code </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

sidebar.php

<div class="col-md-6"> <aside> lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </aside> </div> </div> <!-- end .row -->

footer

<div class="row"> <div class="col-md-12"> <footer> footer related wp code here. </p> </footer> </div> </div> </div> <!-- end of .container -->

i'm not noob bootstrap, nil within of rows or column spans positioning properly; it's 1 linear workspace. content not prepare fit when open on tablet. doing wrong here?

thanks!

you missing classes tablet , mobiles.

you using col-md-6

example: mobile, tablet, desktops

build on previous illustration creating more dynamic , powerful layouts tablet .col-sm-* classes.

source: http://getbootstrap.com/css/#grid

check illustration mobile,tablets , desktops.

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- optional: clear xs cols if content doesn't match in height --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

wordpress twitter-bootstrap

No comments:

Post a Comment