Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 21, 2015 at 8:09 pm #447964
    happinessplunge

    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!

    May 23, 2015 at 6:28 am #448926
    Ismael

    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

    May 23, 2015 at 6:31 am #448930
    Josue

    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

    May 23, 2015 at 9:10 pm #449113
    happinessplunge

    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!

    May 23, 2015 at 10:51 pm #449125
    Josue

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

    Regards,
    Josue

    May 23, 2015 at 11:30 pm #449139
    happinessplunge
    This reply has been marked as private.
    May 24, 2015 at 9:03 pm #449286
    Josue

    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

    May 25, 2015 at 3:55 pm #449570
    happinessplunge

    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.

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