WordPress.org

Ready to get started?Download WordPress

Forums

The Bootstrap
[resolved] Two columns in phone layout (7 posts)

  1. stemie
    Member
    Posted 1 year ago #

    Is it possible to have a two column layout for some span classes when a phone (@media (max-width: 480px)) is accessing the theme?

    Currently in the phone layout view all elements go into one column.

    I hope this makes sense.

    http://wordpress.org/extend/themes/the-bootstrap/

  2. 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

  3. stemie
    Member
    Posted 1 year ago #

    Ok thanks, dont really want to overwrite any core.

  4. 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.

  5. stemie
    Member
    Posted 1 year ago #

    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 -->
  6. Why don't you use the regular markup and just style it differently when the viewport width is below 480px?

  7. stemie
    Member
    Posted 1 year ago #

    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-->

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic