Hi,
Glad to hear this is working for you, you could change the pattern if it suits your needs in Google Analytics, I imagine you will want it descriptive enough that you understand where the click came from.
Unfortunately, I can’t edit the title but the Topic Tags and thread content should be enough that other users will find this helpful, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Thanks for the screenshots, and adding the custom class, the element you are using is the Icon instead of the Icon Box, for this element try this css instead:

.sngmng .av-icon-char {
background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png);
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.sngmng .av-icon-char:before { opacity: 0; }

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

Best regards,
Mike

Hi,
Very Good

Best regards,
Mike

Hi,
True this button-row has the correct/same margins for both buttons

I’m not sure why your iPhone is doing this, does it also occur in landscape mode?
Try removing the HR before the button-row, perhaps that has something to do with it?

Best regards,
Mike

Hi,
Thank you for your patience and for the link to your site, I found that the reason this was happening is because the script that opens the hidden gallery targets the thumbnail class first_thumb but this class is added to the first thumbnail in each row and by default 5 columns are used for each row, so since you have 15 images in the gallery several will have this class and the default action of JQuery is to land on the last one.
One way to correct this is to change the number of columns used for the thumbnails, but the largest option is 12 so this doesn’t help you.
The other option is to change your script to target the :first thumbnail with the class first_thumb which is what I did for you, your script is now like this:

function text_link_to_gallery_lightbox() {
?>
<script type="text/javascript">
(function($) {
    $(document).on('click', '.text_to_lightbox a', function(event) { 
        event.preventDefault(); 
        var linkTarget = $(this).attr('href');
        $(linkTarget).find("a.first_thumb:first").click(); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'text_link_to_gallery_lightbox');

Now the lightbox does starts with the first image of the gallery order.

Best regards,
Mike

Hi,
Thanks for the feedback, I don’t have an iPhone but I do see that the first button that is not in the button-row doesn’t have the left & right 3px margin that the button-row has, try adding this css for the first button:

.avia-button-wrap.avia-builder-el-12 > .avia-button {
	margin: 3px;
}

Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Please also try this.

Best regards,
Mike

Hey aboderc,
Thank you for the link to your site, I tested your page on my Android device and the video plays in landscape mode for me without having to reload the page, it doesn’t show in portrait mode at all. Perhaps your mobile screen size is smaller or you are using an iPhone?
This is expected because browsers such as Safari & Chrome block auto playing background videos on mobile, thus you should use a fallback image for mobile and don’t expect a video to load. This is why the color section background video option says: Most mobile devices can’t autoplay videos

There are some plugins and sliders such as the layerslider, that try to work around this limitation but Safari & Chrome continue to block this with each update.

Best regards,
Mike

Hey navindesigns,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main .flex_column.slide-entry.slide-parity-even {
    margin-bottom: 20px;
}
}

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

Best regards,
Mike

Hi,
Thanks for the feedback, try adding this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    z-index: 1010;
}
.headerMenuItem a {
	font-size: 12px;
}
.responsive #top #wrap_all #header_meta .social_bookmarks li a {
    color: #fff;
}
}

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

Best regards,
Mike

Hey schweg33,
Thank you for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#wrap_all #footer {
    padding: 0;
}

if you want the space even less try adding this also:

#wrap_all #footer .widget {
    margin: 10px 0;
}

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

Best regards,
Mike

Hey navindesigns,

Thank you for the link to your site, to put the two links between the logo and burger menu try this css:

@media screen and (max-width: 767px) {
#top #header #header_main #text-3.widget {
    position: absolute;
    left: 80px;
    right: 0;
    top: -3px;
}
#top #header #header_main .homeHeaderContact {
    gap: 5px;
}
#top #header #header_main .headerMenu li:first-of-type {
    padding-right: 5px !important;
}
#top #text-3.widget ul.homeHeaderContact {
    width: 90%;
    float: right;
    margin: auto;
}
}

while this looks ok for larger mobile (425px) it’s not good for smaller mobiles like iPhones, but you have the empty blue area why not use it and allow your social icons to show:

@media screen and (max-width: 767px) {
#top #header #header_meta {
    background-color: transparent;
}
#top #header #header_main #text-3.widget {
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
}

#top #header #header_main .headerMenu li:first-of-type {
    padding-right: 8px !important;
}
#top #text-3.widget ul.homeHeaderContact {
    width: 100%;
    justify-content: center;
}
}

try each of these add see which you like best, after applying the css, please clear your browser cache.

Best regards,
Mike

Hi,
Glad this helped, the third section is for tablets 768px to 1440px, it was just some minor adjustment I noticed when I was testing your site, if it looks good to you then it’s working :)
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hey Shari,
Thanks for your question, it seems that the default your-domain.com/favicon.ico that browsers look for is pointing to /wp-content/uploads/TSS_112x112-36×36.jpg
which is the one on the right.
What image do you have in your Enfold Theme Options ▸ Favicon?
Do you have an actual favicon.ico in your root directory?
Try removing the Enfold Theme Options ▸ Favicon image and add the correct favicon.ico in your root directory.
Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hey HulaSlim,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#main .slideshow_inner_caption {
    height: 70%;
}

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

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike