Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
#top .post-title {
  line-height: 22px;
}
}

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thank you for the update.

You can add this css code to adjust the color of the selected category:

.responsive #top .main_color #js_sort_items a.active_sort.active_sort {
    color: #ffffff !important;
    border-color: #ffffff;
}

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey mvi,

It’s not working on desktop either on my end, what happens if you try to upload it to Youtube instead?

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .avia-fullwidth-portfolio #js_sort_items .text-sep {
  color: transparent !important;
}

Best regards,
Mike

Hey jim-cp,

Thank you for the inquiry.

The border is applied by this css code:

#header {
    border-bottom: 2px solid #ebebeb !important;
}

You can remove the code or override it in the Quick CSS field:

#top #wrap_all .header_color.av_header_transparency {
    border: 0 !important;
}

Best regards,
Ismael

Hey clbdcnpafe,

Please try the following in Quick CSS under Enfold->General Styling:

#top .fullsize .template-blog .post .entry-content-wrapper {
  text-align: left;
}

Best regards,
Rikard

Hey Diana,
The data is hosted on your site and is GDPR Compliance, see this thread.

Best regards,
Mike

Hi,
Your screenshot is still password protected, please try a different Screenshot service
also provide a admin login so we can check the backend.
It looks like you are using some custom css for the first table:

@media only screen and (max-width: 767px) {
    #top #after_section_1 .avia-table-1 th, 
    #top #after_section_1 .avia-table-1 td {
        display: table-cell;
        min-width: 50%;
        width: 50%;
        padding-left: 17px;
        padding-right: 17px;
        border-right: 1px solid;
    }
}

Note the class avia-table-1 so this doesn’t change all of the tables, try this css instead:

@media only screen and (max-width: 767px) {
    #top #after_section_1 .avia_responsive_table th, 
    #top #after_section_1 .avia_responsive_table td {
        display: table-cell;
        min-width: 50%;
        width: 50%;
        padding-left: 17px;
        padding-right: 17px;
        border-right: 1px solid;
    }
}

Best regards,
Mike

Hi,

Thanks for the update. If you have questions that are off the current topic, then please open a new thread.

Best regards,
Rikard

Hi,
Thanks for the link to your page, when I check I see this:

I recommend this css:

@media only screen and (max-width: 479px) { 
	#top.home #wrap_all #full_slider_1 .av-slideshow-caption .avia-caption-content p {
		font-size: 12px;
	}
	#top.home #wrap_all #full_slider_1 .avia-caption-title {
		font-size: 15px;
	}
}

or this result for small screens (320px):

and this for normal screens (425px)

Please adjust to suit

Best regards,
Mike

Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var footer = document.getElementById('footer');
    var afterSlideshow = document.getElementsByClassName('el_after_av_slideshow');
    if (footer) {
        var newDivFooter = document.createElement('div');
        newDivFooter.className = 'custom-header-background-footer';
        footer.appendChild(newDivFooter);
    }
    if (afterSlideshow.length > 0) {
        var newDivSlideshow = document.createElement('div');
        newDivSlideshow.className = 'custom-header-background-bottom';
        afterSlideshow[0].appendChild(newDivSlideshow); 
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.custom-header-background-footer {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 100%;
    position: absolute;
    top: -50px;
}
.custom-header-background-bottom {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 109%;
    position: absolute;
    top: 25px;
    left: -5%;
    transform: rotate(180deg);
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey Meetx,
Thank you for your patience,
For the “scroll to top button” is set to “aria-hidden=true” as it is not critical to understanding the page’s purpose or functionality, WAI-ARIA says this is correct to prevent the screen reader from announcing its presence or content. This doesn’t prevent tabbing.
Nonetheless if you want to change this and add a label try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
const button = document.getElementById('scroll-top-link');
button.setAttribute( "aria-hidden", "false"  );
button.setAttribute( "aria-label", "label"  );
 </script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please adjust the “label” to whatever you want it to say.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
To remove the “grey veil on the images before the mouse over” try this css:

.responsive #top .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header.header_color .av-main-nav > li#menu-item-11678 > a:hover,
#top #header.header_color .av-main-nav > li#menu-item-11678 > a:focus,
#top #header.header_color .av-main-nav > li#menu-item-11678 > a:hover .avia-menu-text,
#top #header.header_color .av-main-nav > li#menu-item-11678 > a:focus .avia-menu-text,
#top #header.header_color .av-main-nav > li#menu-item-11678 > a:hover .avia-menu-subtext,
#top #header.header_color .av-main-nav > li#menu-item-11678 > a:focus .avia-menu-subtext,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:hover,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:focus,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:hover .avia-menu-text,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:focus .avia-menu-text,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:hover .avia-menu-subtext,
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-11678 > a:focus .avia-menu-subtext {
	color: green;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey MysticMimi,
Thanks for the link to your site, when you use the negative top margin to move columns over an element, you should also use a negative bottom margin to bring the rest of the page up to not have a space:

I adjusted this for you, please check.

Best regards,
Mike

Hi,
The code is not CSS, it is PHP. If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the code and save.

Best regards,
Mike

Hi,
I checked your horizontal gallery on my Android phone and in a Chrome Dev simulation, but in both cases the image is not cropped, when I check with Safari in Responsive Design Mode, I found an issue with Safari so I added this css to your site and seems to solve.

@media only screen and (max-width: 767px) { 
.responsive.avia-safari #top .av-horizontal-gallery-img {
	transform: none;
}
}

Please clear your 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.

Best regards,
Mike