Hi,
Your section with the ID #samplewebsites is hidden on small mobile devices:

probably because you wanted to show the next section only on small mobile:

but that section has no ID, so the mobile menu can’t link to it.
Note that all IDs on a page must be unique and used only once, so to correct your issue, add a ID to the second color section like “mobilesamplewebsites”
then add a second menu item under the current samplewebsites menu item, with the custom classes “av-desktop-hide av-medium-hide av-small-hide” and a link of #mobilesamplewebsites
and then add the custom class “av-mini-hide” to the current samplewebsites menu item.

Best regards,
Mike

Hey Oriano,
Users with “edit_published_posts” permissions such as Administrators, Editors and Authors can view the site.

You could edit line 304 in /enfold/includes/classes/class-avia-custom-pages.php
but there is not a way to change this in your child theme, so you would need to update this file for each version update.
Your best option would be to use a plugin instead.

Best regards,
Mike

Hi,
It looks like you had a duplicate thread for the overlay icon, check here.

Best regards,
Mike

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

.avia_transform a:hover .image-overlay {
    opacity: 1 !important;
    background: transparent !important;
}
.avia_transform .image-overlay {
    background: transparent !important;
}

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 Martin,
To add a red border to items that you tab to, you can add this css:

a:focus,button:focus {
  border:1px solid red !important;
}

adjust the color and size to suit.
Your accessibility plugin is at the bottom of the page in the DOM, so you would need to tab the whole page to get to it, perhaps the plugin settings has an option to move it to the top of the DOM? The plugin button also has a tabindex of -1 so you can’t tab to it, check the plugin settings.
If you can’t change these in the settings, 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() {
	const accessibilityButton = document.querySelector('#accessibility-trigger-button');
    const messageBar = document.querySelector('#accessibility-button');
    const body = document.querySelector('body#top');
    body.prepend(messageBar);
    accessibilityButton.setAttribute('tabindex', '1');
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This javascript will move the accessibility-button in the DOM to the top of the page so it is the first tab, the icon will still show at the bottom of the page, it will also change the tabindex so you can tab to it. With the css above to add a red border, the first tab will show this:

and then if you hit the enter key it will open:

Best regards,
Mike

Hi,
Change this css:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
}

to this:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
	font-size: 20px;
	line-height: 20px;
}

then add this css:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
    line-height: 20px;
}

adjust to suit.
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 adjust the size and position of the slider arrows, try to add this css code:

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
  opacity: 0;
  margin: 0;
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 20px !important;
  top: 0;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
  height: 20px;
  width: auto;
  margin-top: 15px;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  top: 20px;
  left: auto;
  height: 24px;
  right: 10px;
}

If you’re trying to disable the image overlay, add this code:

.image-overlay, .image-overlay .image-overlay-inside {
    display: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

The images seems to be accessible when we check, but it’s possible that an image overlay is blocking access to the context menu or download option. We added the following code to the Quick CSS field to disable the overlay on mobile view.

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  .avia_transform a .image-overlay {
    display: none !important;
  }
}

Best regards,
Ismael

Hi,

You can try this css code but it might affect the slider transition a bit.

.slide-entry-wrap:not(.active-slide) .slideimage .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb img {
    opacity: 0;
}

For additional assistance, please contact the developers of the slider plugin.

Best regards,
Ismael

Hey mickhb,

Thank you for the inquiry.

You can use either the Masonry or Masonry Gallery element. Make sure to upload tall portrait images. If you choose the Masonry element, you can control the item sizes by adding the tags “portrait” or “landscape” to your portfolio items. Make sure to set the Styling > Masonry Settings > Size Settings to Perfect Manual Masonry.

Please check the links below for more info:

— https://kriesi.at/themes/enfold/shortcodes/masonry-gallery/
— https://kriesi.at/documentation/enfold/masonry/

Best regards,
Ismael

Hi,

Thank you for the update. If you’re not particularly focused on replicating the exact effects, animations, and scroll interactions, you can use the available elements in the Advanced Layout Builder. For example, in the first section, you could use the Headline element, followed by a Color Section with a background image or video — you can also use sliders. It will require a significant amount of customization, but it should be doable. If you need more assistance, consider reaching out to Codeable.

— https://kriesi.at/contact/customization

Best regards,
Ismael

Hi,

the color section is set to color #eeee22, column 1/1 has a padding of 150px and a background color #7bb0e7, but as you can see from the image none of these properties are applied in the front-end

We checked the Styling > Background Colors of the Color Section and Column elements, but they are not set. Are you sure you’re editing the correct elements?

View post on imgur.com

Best regards,
Ismael

Hey xfacta,

Thank you for the inquiry.

The first section displays fine on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,

Thank you for the update.

We added this filter in the functions.php file:

add_filter('avf_wc_before_shop_loop_item_title_img_size', function($thumb) {
	return 'large';
}, 10, 1);

A larger version of the product image is now loaded on the shop page.

View post on imgur.com

This may vary across different screen sizes due to the srcset attribute and how the browser selects the appropriate thumbnail based on the current screen size.

Best regards,
Ismael

Hey wouter,

Thank you for the inquiry.

There is no option for this by default. You need to add a Gallery or Slider to the page and manually select the images to display. Let us know if you need more info.

Best regards,
Ismael

Hey waveseven,

Thank you for the inquiry.

The screenshot is not displaying on our end. To make sure the items in the blog grid are the same size, you may need to resize the featured images before uploading them, making sure they have the same dimensions and aspect ratio. Please note that the uploaded images are not cropped or resized exactly based on the specified width and height of the registered thumbnails — aspect ratio of the original image is also taken into consideration. So, two images with different dimensions and aspect ratios may produce different “Portfolio” thumbnails.

Best regards,
Ismael