Hey Erwin,

Thank you for the inquiry.

The no-scaling option is really meant for cases where you need pixel-perfect originals, so 800kb thumbnails with 100 posts will definitely cause performance issues. The best approach here is to resize your images before uploading them to WordPress. For a masonry gallery, images don’t need to be wider than 1200px or so, and at that size you can usually get them well under 150kb without any visible quality loss.

After resizing, run them through a compression tool like TinyPNG or Squoosh before uploading. If you’ve already uploaded the originals, a plugin like Imagify or ShortPixel can bulk-compress your existing media library.

For the gallery setting itself, you can then switch back to one of the standard cropping options in the masonry element, which will let WordPress serve correctly sized thumbnails automatically.

— https://tinypng.com
— https://squoosh.app

Let us know if you have more questions.

Best regards,
Ismael

Hey Lance,

Thank you for the inquiry.

This is actually more of a Hustle Pro question than an Enfold one, but we can help clarify the Enfold side of things.

For your image in the classic editor, enter .parking in the “Image CSS class” field. That will add the class to the img tag itself, which gives Hustle Pro a valid css selector to target. The “Link CSS class” field applies to the wrapping anchor tag, which would also work as a selector, but using the image class is the more straightforward choice here.

Adding the class in that field is sufficient to create the selector. You don’t need to do anything else on the Enfold/Wordpress side. Just make sure the class you enter in Hustle Pro’s trigger field matches exactly, including the dot prefix (i.e. .parking).

For the “Link To” setting, if you don’t actually want the image to navigate anywhere on click, you can set it to a custom URL and use # as the value. That prevents any navigation while still allowing the click event that Hustle Pro listens for.

For further details on configuring Hustle Pro’s trigger settings, please refer to their documentation.

— https://wpmudev.com/docs/wpmu-dev-plugins/hustle/

Let us know if you have more questions.

Best regards,
Ismael

Hi,
Ok, try this css then:

.page-id-3368 #intro .iconbox_icon {
	background-color: red;
	border: red;
}
.page-id-3368 #intro.main_color .iconbox_icon.heading-color:before {
	color: #fff;
} 

Best regards,
Mike

Hi,
Seems to be working when I check, try clearing your cache

Best regards,
Mike

Hi,

Thank you for the update.

The video played fine on Safari when we checked. Have you tried testing it on a different device?

Best regards,
Ismael

Hey dnweil,

Thank you for the inquiry.

If you’re using the Advanced Layout Builder, each element, especially Text or Heading elements, has a Styling > Font Sizes option which can be adjusted for different screen sizes.

There is also an Element Visibility setting in the Advanced > Responsive panel which can be used to toggle the visibility of an element for different screen sizes. For cases where element options are not enough, you can always add css modifications.

Best regards,
Ismael

Hey Stretchspot,

Thank you for the inquiry.

There is no option to use an Image in an Iconbox element, but you can replicate the box using combinations of elements. Add a Column element, insert an Image element inside, add a Text Block for the description, then a Button element if you need a call-to-action element. Let us know if this works for you.

Best regards,
Ismael

Hey dreyerjm,
Try this css:

.main_color .avia-content-slider .slide-image {
	background: transparent;
} 

Best regards,
Mike

Hey dreyerjm,
Try adding this css to your quick css field in the theme options:

.av-single-event-content .tribe-events-event-image {
	display: none;
} 

Then clear your cache and check.

Best regards,
Mike

Hi,

Thank you for the inquiry.

Please add this css code to adjust the width of the images on mobile view.

@media (max-width: 768px) {
  .avia-image-container.avia-align-center .avia-image-container-inner {
    width: 100%;
  }

  .avia-image-container .avia-image-overlay-wrap,
  .avia-image-container .avia_image {
    transition: all 0.7s;
    width: 100%;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The height of the rows are the same because of this inline style in the html.

<div class="rss_image" style="height:150px;width:150px;">

You have to remove the height and width properties.

View post on imgur.com

Best regards,
Ismael

Hi,

We can’t find any layout issue on the page. Would you mind providing a screenshot of the issue? You can use platforms like FreeImage, ImgBB, PostImages 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, ImgBB, PostImages 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 clarification.

This is how the image looks (see private field) when we magnify the page at the maximum level, and we don’t think there’s any way to enlarge it further. You can add a download button somewhere on the page so users can download the image and use default image editors in their operating systems, which should have their own zoom function if they really need to see the image more clearly.

Use the Button element to create a Download button — check the screenshot below.

View post on imgur.com

Let us know if you need more information.

Best regards,
Ismael

Hi,
I’m not sure that I understand, do you mean that the images are not lined up?

You write about the width, but all menu items & images are the same width

In the image above you have manual line breaks between the words, probably so the long word would not break and be hard to read

So this might make the space look larger, but it’s really not.

Best regards,
Mike

Hi,
To show the post featured image on the category pages, I added this to your child theme functions.php file:

add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
function avia_change_category_blog_layout($layout, $context){
if($context == 'archive') $layout = 'single-big';
return $layout;
}

As for your excerpts, right now you are using manual excerpts, what you call the summary box at the bottom of the article page, when these are used the auto excerpts are disabled, so you can’t have both. You could add more text to the manual excerpts if you wish.

Best regards,
Mike