On mobile, the top image on webpages load the full width of the image, but not the full height. The photo is set to take up 50% of the view height, but that only kicks in after the user does something. The height loads after some action is taken on the screen, such as a scroll or click on the burger menu. The result is that the first impression of the webpage is bad with a cut off image that is too small/short in height.
Is it possible to have this corrected for the first image on pages on mobile?
Hey Tanja,
Thank you for the inquiry.
The image in the first section seems to be displaying correctly in full on mobile view — screenshot below.
We tried checking your screenshot above, but it’s private. Please make the screenshot accessible or use other platforms like FreeImage, PostImages or Imgur.
Best regards,
Ismael
Please try the new link.
Hi,
Thank you for the update.
We can’t reproduce the issue on our end, as shown in the screenshot above, but you can try this css code to apply a minimum height to the color section container.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.page-id-30 #av_section_2 .container {
min-height: 350px;
}
}
You may want to apply a custom css class name or ID to the element and adjust the selectors in the css rule.
— https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
Ismael
Thank you. This can be closed.
