• To allow Child Pages Shortcode to work on multiple screen sizes, the container width needs to change based on the screen.

    Begin by commenting out the inline width style in the .child_page div in the child-pages-shortcode.php file. Like so:
    $html .= '<div id="child_page-%post_id%" class="child_page" style="/*width:%width%;*/max-width:100%;">';

    Then add this to the plugin’s style sheet. I set the fullsize screens to 3 columns (33%), tablets to 2 columns (50%), and mobile phones to single column (100%).

    /* begin responsive container width */
    @media (min-width: 1340px){
        .child_page {width:33%;}
    }
    
    @media (min-width: 1001px) and (max-width: 1339px){
        .child_page {width:33%;}
    }
    
    @media (min-width: 764px) and (max-width: 1000px){
        .child_page {width:50%;}
    }
    
    @media (max-width: 763px){
        .child_page {width:100%;}
    }
    /* end responsive container width */

    http://wordpress.org/extend/plugins/child-pages-shortcode/

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Make Child Pages Responsive for Multiple Screen Sizes’ is closed to new replies.