Instagram Widget No Space on sides

Hey mcraig77!

I did loaded your web site now, and I can see there is no space right now.
Can u please check if you clear your cache and eveyrthing looks ok?

Thanks a lot

Cheers!
Basilis

Hi!

The current structure will not allow you to do it easily… Please use a color section and insert the insta widget inside it then we can provide you custom css to make it full width.

Cheers!
Vinay

Hi!

OK! let’s try and set it up for you… please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

Cheers!
Vinay

Hey!

Please make the user as admin. We cannot see the complete dashboard options :)

Cheers!
Vinay

Hey!

Please refresh the browser cache and review the site now we have added the below css

/* Fullwidth Insta */
.responsive #top #wrap_all .fullwidth-insta .container {
width:100%!important;
max-width:100%!important;
}

Regards,
Vinay

Hi!

Ok! we have made change to the code please review the site now.

Best regards,
Vinay

Hi!

If you remove the class name “fullwidth-insta” from color section edit options it will appear as before :)

Best regards,
Vinay

Hi,

Please add the below code in your theme functions.php via Appearance > Editor > functions.php

function instaOverlay(){
?>
<script>
jQuery(document).ready(function() {    
   jQuery(".av-instagram-item").find(".image-overlay.overlay-type-image").css({'left' : '-0px','width': '380px'});
});
</script>
<?php
}
add_action('wp_head', 'instaOverlay');

If you still have any issues please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:

• the URL to the login screen
• a valid username (with full administration capabilities)
• as well as a password for that username

Best regards,
Vinay

Hi,

The code works on my installation however I believe there are other custom modification added to the instagram widget due to which there is a conflict. Please backup and remove any modification added tot he instagram widget and it’s styles. By default there should be a gap between the instagram thumbnails like the below screenshot and we can take it from there :)

Best regards,
Vinay

Hi,

Once the custom code is removed we can add the new code so there is no conflict.

If you have any questions please feel free to let us know.

Best regards,
Vinay

Hi,

To fix the instagram image overlay width on hover please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

#top .av-instagram-item .image-overlay.overlay-type-image {
	left: 0 !important;
	width: 100% !important;
}

Best regards,
Vinay