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 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

I decided to go with a different approach. You can close this. Thank you.

Best Regards,
Julio

Hi Mike,
Thank you so very much for this information. It’s so very helpful. I will definitely try your suggested approach and look into the Zapier integration plugin.
I greatly appreciate your continued support and from the other Enfold Moderators, I have come a long way with all the help I have received.

Feel free to close this. If I need additional assistance, I will reach out to MailPoet and Zapier for support. Thanks again.

Best Regards,
Julio

Rikard,

That did the trick. You can close this. Hope this helps other newbies like me. Thank you so much for your help.

Best Regards,
Julio

Mike,
Thank you!!! That seemed like an easy fix. Just not the normal setup for links that I’ve become accustomed to. Truly appreciate the quick response.
You can close this one.

Best Regards,
Julio

Rikard,

Thank you, that fixed it!!! Appreciate your help.

Best Regards,
Julio

Hi Ismael,

Thank you for your response. I was hoping that I could somehow automate this, but I guess it was wishful thinking.

I’m just curious, how is this site accomplishing:
https://www.vi-ow.com/motion-design-cgi/scatter

As always, thanks for your help.

Best Regards,
Julio

Hi Mike,

Thank you so much for this awesome suggestion. I will definitely check it out.

Best Regards,
Julio

Hey Ismael,

Thank you for your quick response. I have two clarifying questions:

1. “Make sure to adjust the image URL”
I’m assuming that I don’t have to create a separate image for mobile – Right?

2. “place the code inside the css media query so that it only affects the mobile view.”
Should I place this CSS in the Styles.CSS in my Child Theme?

I also read that you should always put your media queries at the end of your CSS file. Is this accurate?

Sorry for the naïve questions, still learning ;)

Thank you for your help.

Best Regards,
Julio

• This reply was modified 3 years ago by Jules.

Mike,
Cannot THANK YOU enough!!! You and the other Enfold Moderators are absolutely awesome. I truly appreciate ALL the help and support.
Have a wonderful day!!!

Best Regards,
Julio

Hi Ismael,

Thank you so very much. I’m new with the CSS, but willing and excited to learn. Appreciate your help, support and resources.

Best Regards,
Julio

Mike & Ismael,
WORKS AS EXPECTED :)
THANK YOU SO VERY MUCH FOR YOUR HELP! IT IS GREATLY APPRECIATED!!!!
Julio

@Ismael,
Thank you for your response. I have a couple naïve questions:
1. I have placed the Image Element within a Color Section
2. I added the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field
3. Silly Naive Question: Where do I add this CSS code?
4. content: ‘Play Button Here’; – Is this the full URL for the button (e.g. https://kingdomlearners.com/wp-content/uploads/2021/12/Play-Button-Mouseover-for-Thumbnails.png)?

Thanks so much for your help.