Hi,

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

@media only screen and (max-width: 767px) {
#top .avia-gallery.av-mb6m8z6a-b9f99ac9fd31fe48d94c453aabd891f1 .avia-gallery-thumb a {
  width: 50%;
}
}

Best regards,
Rikard

Hi,

Thank you for the update.

To hide the post tags, you can add this code in the Quick CSS field or the style.css file:

#top #wrap_all .slide-meta-tags {
    display: none;
}

Let us know the result.

Best regards,
Ismael

Hey Sebastian,

Thank you for the inquiry.

Apply a Custom CSS Class name (e.g “avia-custom-gallery”) to the Gallery element in the Advanced > Developer Settings panel, then add this css code to adjust the width of the items on mobile view.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .avia-custom-gallery .avia-gallery-thumb a {
    width: 25%;
  }
}

Best regards,
Ismael

Hey guylene1,

I see that you are running an old version of the theme, could you try to update to the latest version (7.1.1) to see if that helps please? The update to 7.1.1 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Thank you for the update.

and when I set it to “scale to fit”, it doesn’t show on mobile.

The background is set to “scale to fit” and it’s still visible on smaller screens when we checked. If the issue still occurs on your end, try to duplicate the section, adjust the background size settings, one using “scale to fit” and the other “stretch to fit”, then toggle the sections’ visibility for different sizes using the Advanced > Responsive > Element Visibility options.

View post on imgur.com

You can also add this css code to manually adjust the background size to “cover” or “stretch to fit” on smaller screens:

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .flex_cell.av-m7hqe6b7-0a95c68b280818d6da5bb44681988588 {
    background-size: cover !important;
  }
}

Best regards,
Ismael

Hi,

We can’t reproduce the issue with the section backgrounds. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot.

View post on imgur.com

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey!

Thank you for the inquiry.

Did you add this css code?

@media only screen and (max-width: 767px) {
    #top .header_color .av-hamburger-inner,#top .header_color .av-hamburger-inner::before,#top .header_color .av-hamburger-inner::after {
        background-color: var(--enfold-header_burger_color);
    }
}

This sets the color of the hamburger menu icon to white. You can replace it with:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .header_color .av-hamburger-inner,
  #top .header_color .av-hamburger-inner::before,
  #top .header_color .av-hamburger-inner::after {
    background-color: var(--enfold-main-color-color);
  }
}

Regards,
Ismael

Hi,

However, I believe there may have been a misunderstanding regarding the issue. The problem is not with the icon itself or its aria-hidden attribute, but with the structure and function of the link that wraps the icon.

If we’re not mistaken, the issue occurs because the SVG icon includes the aria-hidden attribute, which makes it unreadable to accessibility tools. As a result, the parent link is marked as “suspicious” since the icon is hidden and the link lacks any accessible text or description. The span avia_hidden_link_text, which contains the word “Search” also has its display property set to none, making it inaccessible to screen readers as well.

Removing the aria-hidden attribute from the SVG icon or adjusting the visibility of the avia_hidden_link_text should help.

#top .avia_hidden_link_text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

You can also try editing the enfold/includes/config-enfold/functions-enfold.php, around line 125, change the text “Search” to “Click here to search”.

$items .=			'<span class="avia_hidden_link_text">' . __( 'Click Here to Search', 'avia_framework' ) . '</span>';

According to https://wave.webaim.org/, screen readers tend to better interpret buttons or links when it contains more descriptive text.

View post on imgur.com

If this doesn’t help, you can always try the suggestions above.

Let us know the result.

Best regards,
Ismael

Hey tonyiatridis,

Thank you for the inquiry.

We enabled the Project Settings > Navigation > Show Navigation Buttons > Slide Navigation Buttons, then added this css code to make the thumbnail navigation fullwidth.

.ls-noskin .ls-thumbnail {
    top: 0px;
    width: 100% !important;
}

View post on imgur.com

Best regards,
Ismael

Hey Enfoldfanatic,
It looks like you have this css that is making it white:

#top #wrap_all .header_color .cart_dropdown_first .cart_dropdown_link.avia-svg-icon svg:first-child {
    fill: #ffffff;
}

see if you can remove this, or you can try adding this:

#top #wrap_all .header_color #menu-item-shop .cart_dropdown_first .cart_dropdown_link.avia-svg-icon svg:first-child {
    fill: #000;
}

Best regards,
Mike

Hey limedrop,

Thank you for the inquiry.

You can try this css code to apply a linear gradient background color to the header:

#top .av_header_transparency .header_bg {
    opacity: 1;
    background: linear-gradient(to bottom, #0f114c, rgba(15, 17, 76, 0));
}

You may need to adjust the color of the main menu items as well.

Best regards,
Ismael

Hey klick-design-rbh,

Duplicate thread: https://kriesi.at/support/topic/reduce-loading-time-with-the-ajax-portfolio-2/

Best regards,
Ismael