Hi stemie,
it probably is, but you’d have to overwrite a lot of core Bootstrap styles in a media query to do that. When the width is under 480px, they set all spans to width: 100%.
Konstantin
Thread Starter
stemie
(@stemie)
Ok thanks, dont really want to overwrite any core.
If you do it in a Child Theme’s style.css file, it’s all good. With ‘overwrite’, I mean defining styles that supersede the ones defined by Bootstrap.
Thread Starter
stemie
(@stemie)
Ok thanks, I am using a child theme.
In my child css I added:
@media (max-width: 480px) {
.span2 {width:50%;float:left;}
}
To get the two columns I’ve ended up running a loop twice though but that seems like a waste of resources? Is there anyway it can load the loop once depending on if .visible-phone or .hidden-phone is being shown?
<div class="span2 hidden-phone">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
// stuff
<?php endforeach; ?>
</div><!-- .span2 hidden-phone-->
<div class="row visible-phone">
<div class="span4">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<div class="span2">
//stuff
</div>
<?php endforeach; ?>
</div><!-- .span4 -->
</div><!-- .row visible-phone -->
Why don’t you use the regular markup and just style it differently when the viewport width is below 480px?
Thread Starter
stemie
(@stemie)
Im not sure I understand.
I made a mess of it by trying it this way without duplicating the loop.
<div class="row">
<div class="span2 hidden-phone">
<div class="row visible-phone">
<div class="span4">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<div class="span2">
//stuff
</div>
<?php endforeach; ?>
</div><!-- .span4 -->
</div><!-- .row visible-phone -->
</div><!-- .span2 hidden-phone-->
