Column Anchor-Link and mobile breakpoint

Hi Daniela,

Could you try updating the theme to the latest version (4.8.2) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update. If not, then please post admin WordPress login details in private, so that we can have a closer look at your site.

Best regards,
Rikard

Hi,
Thank you for your patience and for the login to your site, for the column link issue the links didn’t work because they included hashtags that indicated the anchor links and they were on the homepage, the column links would work if both of these were not true because column links are not real links, they are faked with javascript, anyways I found that by modifying the /js/shortcodes.js file I can create a workaround for you.
So I modified line 660 from this: if( (0 == url.indexOf("#")) || ((url.indexOf(link) >= 0) && (url.indexOf("#") > 0) ) )

to this: if( (0 == url.indexOf("#")) )

and this seems to work correctly now, please clear your browser cache and check.

Best regards,
Mike

Hi,
To add the modified shortcodes.js to your child theme you can create a js folder in your child theme and paste in your modified shortcodes.js file there, then on functions.php of your child theme add this code:

function change_aviajs() {
   wp_dequeue_script( 'avia-shortcodes' );
   wp_enqueue_script( 'avia-shortcodes-child', get_stylesheet_directory_uri().'/js/shortcodes.js', array('jquery'), 3, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 100 );

For your 12 1/4 columns spacing please try this css:

.responsive #top.page-id-13 #wrap_all .flex_column.av_one_fourth {
    margin-top: 1% !important;
    margin-left: 1% !important;
    margin-bottom: 0 !important;
}

I noted there was an issue with your second and third items at tablet size that was making those two columns much smaller than all of the others, I cloned the first two items and this seemed to have solved it enough that I could figure out the css for the spacing, but now you have 14 items and not 12, please review if you have any other rouge css affecting these or try creating a test page with the 12 1/4 columns and no custom classes so we can investigate, otherwise if you plan on adding more products anyways then just adjust the two additional products.

Best regards,
Mike

Hi,
Thank you for the feedback, at 960px the section is still showing 2 columns, the break to 4 columns as shown in your screenshot occurs at 989px, then at that point the column width is 20.5% to account for the original margin spacing, so to correct this I recommend changing the column width to 23.5% with this css:

@media only screen and (min-width: 989px) { 
.responsive #top.page-id-13 #wrap_all .flex_column.av_one_fourth {
	width: 23.5% !important;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike