WordPress.org

Support

Support » Themes and Templates » [Resolved] [Theme: The Bootstrap] Two columns in phone layout

[Resolved] [Theme: The Bootstrap] Two columns in phone layout

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Konstantin Obenland

    @obenland

    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

    Ok thanks, dont really want to overwrite any core.

    Theme Author Konstantin Obenland

    @obenland

    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.

    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 -->
    Theme Author Konstantin Obenland

    @obenland

    Why don’t you use the regular markup and just style it differently when the viewport width is below 480px?

    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-->
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] [Theme: The Bootstrap] Two columns in phone layout’ is closed to new replies.