Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #447964

    Hello,

    For some reason, some sections on my homepage are responsive, and others aren’t. Maybe responsive isn’t the right word, but when the screen size shrinks, in some sections the elements stack on top of each other to make it easier to read, and in others they don’t.

    The homepage is http://www.happinessplunge.com/

    The top two sections work well, these icon boxes and the animated numbers. But the bottom two sections don’t, these icon boxes and the recent blog posts.

    Any idea how to fix this? I’m sure it’s simple, but my troubleshooting yielded no results.

    Thanks!

    #448926

    Hey happinessplunge!

    Thank you for using Enfold.

    Some of the color sections are outside the wrap_all container. Please check all sections in the page, make sure that there are no unclosed tags (divs, span, strong etc).

    Regards,
    Ismael

    #448930

    Hi!

    It’s because those sections are outside the #wrap_all div which is supposed to wrap all contents, not sure how they ended up there but the following CSS code will workaround it:

    @media only screen and (max-width: 767px) {
    
        #howfar .flex_column, #blogmasonry .flex_column{
            margin: 0;
            margin-bottom: 20px;
            width: 100%;
        }
    
    }

    Best regards,
    Josue

    #449113

    Hi Josue,

    Thanks so much for your insight!

    I ran a WC3 validator on my homepage and it revealed a stray end div tag just before the howfar section starts. I wonder if this is causing the wrap all div to close? You can see the result here.

    I am running a child theme and the only modifications I’ve made are this one to loop-index and the code below to functions.php.

    
    add_filter('avf_blog_style','avia_change_archive_blog_layout', 10, 2); 
    
    function avia_change_archive_blog_layout($layout, $context){
    
    if($context == 'archive') $layout = 'single-small';
    
    return $layout;
    
    }
    
    add_filter('avf_blog_style','avia_change_tag_blog_layout', 10, 2); 
    
    function avia_change_tag_blog_layout($layout, $context){
    
    if($context == 'tag') $layout = 'single-small';
    
    return $layout;
    
    }
    
    add_filter( 'avf_masonry_excerpt_length', 'masonry_excerpt_length');
    
    function masonry_excerpt_length() {
    
    $excerpt = 200;
    
    return $excerpt;
    
    }
    
    // remove masonry image title
    
    function add_custom_tooltip(){
    
    ?>
    
    <script>
    
    jQuery(window).load(function(){
    
    jQuery('a').removeAttr('title');
    
    jQuery('img').removeAttr('title');
    
    });
    
    </script>
    
    <?php
    
    }
    
    add_action('wp_footer', 'add_custom_tooltip');
    

    There are no missing brackets anywhere in the code I’ve added.

    Any thoughts would be appreciated! The CSS you gave me works, but if possible it would be nice to fix the underlying problem.

    Thanks again!

    #449125

    I could give it a quick check if you hand me FTP and Dashboard access.

    Regards,
    Josue

    #449139
    This reply has been marked as private.
    #449286

    Hey!

    It was caused by the Grid Row containing the animated numbers, i managed to fix it by 1) moving the Grid Row to the end of the page 2) saving 3) restoring it to its original position 4) saving the page again and now all elements are inside of wrap_all as expected.

    Sometimes full width elements get funny and this is one way of fixing them :)

    Regards,
    Josue

    #449570

    Hola Josue,

    Muchas gracias!!! Thanks so much. I never would have figured that out on my own. I’m glad I know the trick now.

    Thanks again for going the extra mile to help!

    Saludos.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mixed responsiveness on page’ is closed to new replies.