Hey Nancy,

Thank you for the inquiry.

You may need to upload images with the same size and aspect ratio to make sure that all slides have the same height. Alternatively, you can try this css code, but it may slightly adjust the width of smaller images.

.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
    max-height: 258px;
    width: auto;
}

Best regards,
Ismael

Hi,

for example horizontal photos are visible in their entirety because they are automatically adapted to the screen,

Some images appear fully visible on mobile because their aspect ratio differs from the phone browser’s viewport. In portrait mode, the viewport is taller than most images with a landscape proportion, making them fully visible. Please note that images automatically adjust to occupy the space of their parent container. If you want to control how the images are resized and make them fully visible on certain screens with different aspect ratio, you need to apply a custom css class name to them and adjust their width or height manually. For example, you can set the image width to 50%, and the image will resize proportionally to its height.

@media only screen and (max-width: 1366px) {
     /* Add your Mobile Styles here */
     .av-limit-image-height img.avia_image {
        width: 50%;
        margin: 0 auto;
    }
}

Again, you need to apply the class name “av-limit-image-height” to the Image element. However, focusing on whether the images are fully visible on load may not be necessary, as users can still scroll to view the content.

Best regards,
Ismael

Hey fanlokbun,

Thank you for the inquiry.

Which browser are you using? 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,
In Brave please ensure to disable the “Brave Shield” in the address bar.
I added the word “test” to your message bar:

Best regards,
Mike

Hi,

Thank you for the clarification.

Try to add this css code to adjust the text color of the title:

#top #wrap_all .all_colors .av-image-caption-overlay-center h3 {
    color: #ffffff;
}

And to apply the overlay on mobile view, try this css code:

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

  /* Add your Mobile Styles here */
  #top .avia-slideshow.av-m3vkqh71-4e1d1fba30600cffcf1218dbcfe528bd .avia-slide-wrap:before {
    content: '';
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}

Best regards,
Ismael

Hey tixxpff,

Thank you for the inquiry.

You can add this filter in the functions.php file to change the lightbox thumbnail size of the horizontal gallery:

function avf_alb_lightbox_image_size_mod($size) {
  return "full";
}
add_filter('avf_alb_lightbox_image_size', 'avf_alb_lightbox_image_size_mod', 10, 1);

Best regards,
Ismael

Hey!

Thank you for the inquiry.

We were not able to edit the settings because the account above is not an admin. This should work for the first image in the portfolio, but it might slightly distort the image:

.avia-image-container.av-m3m81k8l-37e2592474b1f3aa9f01e6b56eac1db5 img.avia_image {
    max-height: 600px;
}

If you want to apply this to specific images, try adding a Custom CSS Class name (e.g., av-limit-image-height) in Advanced > Developer Settings, then replace the css code with this:

.av-limit-image-height img.avia_image {
    max-height: 600px;
}

For more info about css class names, please check this link: https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Regards,
Ismael

Hey Tanja,

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

.av-image-caption-overlay-center {
  vertical-align: bottom;
  padding: 10px 1.5em;
}

Best regards,
Rikard

Hi,

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

.av-masonry-image-container {
  transition: none !important;
}

Best regards,
Rikard

Hey luleloki,

Thank you for the inquiry.

What do you mean by “iFrame and Lightbox for different views”? If you simply need to display an image inside a lightbox, you can link the image, and the theme will automatically configure it to open within a lightbox container.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Where can we check these images? Please provide the link to the page in question so that we can inspect the images. Have you tried applying a maximum height to the image?

@media only screen and (max-width: 1366px) {
	/* Add your Mobile Styles here */
	.image {
		max-height: 700px;
	}
}

Adjust the “.image” selector accordingly.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,
I assume that here it is correct:

here there is a “em” tag

but on your other page there is not

Please check your page the “em” tag

Best regards,
Mike

Hey icarogioiosi,
Typically, forcing a 600*800 image to 1360*768 will stretch the image, is this what you want?

Best regards,
Mike