Large White Gap Related to Pages with Full-width Easy Slider

UPDATE:
Per Ismael’s suggestion on this post: https://kriesi.at/support/topic/fullwidth-easy-slider-23/, I disabled the Lazy Loading Feature in the Smush Plug-in. As a result, my PC/browser experience appears to be back to normal. However, my mobile experience has NOT improved. On all pages, the first couple of sections below the top fold are larger now and pushing everything down.

I have removed the CSS (Custom & Quick) I reference above and it corrects the problem I was experiencing on my mobile devices.

Now, I’m back to the same problem I was trying to fix with this CSS code. On the page referenced below, I’m using a Color Section at the top of the page where I have a background image and special heading text over the top of the image. On larger screens the background image looks good, but on mobile devices is gets smashed. Something in the CSS code I “borrowed” from another post fixed this problem, but caused other problems on the site.
Here is the post I’m referring to where I tried to reapply the CSS: https://kriesi.at/support/topic/color-section-full-size-image-shown-on-mobile/

How can I get this image to display properly on mobile?

Thanks for any assistance you can offer.

Best Regards,
Julio

• This reply was modified 2 years, 9 months ago by Jules.

Mike,
Thank you for your help. As always, it’s greatly appreciated.

I tried both of your suggested approaches, but the mobile image still looked smashed and was not displaying fully.

So I retried the original CSS I was using with some minor changes. On the “Custom CSS, I removed references to #av_section_2 thru _4 and I kept the Quick CSS the same – see original references in my initial post above.

CUSTOM CSS:
/* 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: 475px) {
#av_section_1 {
   background-size: cover !important;
   height: 600px !important;
}
}

QUICK CSS:

/*Mobile Image Resizing + Custom CSS */
.avia-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

Can you please review this code and how the page I reference below is displaying for you on PC & mobile? Does it look ok, any changes?

Thank you!!!

Best Regards,
Julio

Mike,

Thanks for the clarification and the screenshot.

I’m assuming that if I want the mobile images in the Color Section to be smaller, I would have to decrease the number in “height: 600px” – Right?
UPDATE: I changed the “height: 500px” and it negatively effected several pages from a mobile experience.

Is there a standard “px” height and width images that would display best for mobile that you would recommend? Also, where can I learn more about CSS (beginners for starters) and Enfold specific CSS tags? THANK YOU!!!!

@media only screen and (max-width: 475px) {
#av_section_1 {
   background-size: cover !important;
   height: 600px !important;
}
}

Thank you!!!

Best Regards,
Julio

• This reply was modified 2 years, 9 months ago by Jules.

Mike,

Thanks for the detailed response and continued support. My apologies for not providing more details for “ several pages were negatively affected”.

When I changed the height to 500px within the CSS above, the pages where I’m using a Full-Width Easy Slider at the top of the page the element below is a Color Section and it gets stretched out in height – see example screenshots and page URLs under Private Content.

You make references to: what background-size: cover does, and another option is background-size: contain Where are these referenced within the elements? I don’t recall see these. Thank you!

As for your CSS suggestion

Thank you so much for the details on mobile images. On a couple other pages I created a separate element at the top of the page for mobile only. Took me some trial and error. Since my images for mobile could change from based on the page from Portrait or Landscape, I’m thinking the two separate element approach (desktop vs landscape) might work better for me vs CSS. Will make a choice soon ;)

As for your CSS suggestion: target title-color-section, is this the change I would make to Quick & Custom CSS?

CUSTOM CSS:

@media only screen and (max-width: 475px) {
#title-color-section {
   background-size: cover !important;
   height: 600px !important;
}
}

QUICK CSS:

/*Mobile Image Resizing + Custom CSS */
. title-color-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

Thank you for helping me think through this so I can apply the most efficient approach with constant results.

Best Regards,
Julio

Mike,
Thank you so very much for the details and helpful guidance.

I decided to go with your 2nd CSS suggestion . . .

https://savvyify.com/img/image/HYvp

#top #main .title-color-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

Appears to be working as desired. If you have no other suggestions, you can close this lengthy :) topic.

Thanks again for ALL your help!!!

Best Regards,
Julio

• This reply was modified 2 years, 9 months ago by Jules.