[janaboyko]

Hello,

The hero image on this page (see private content section) is getting cut off on the right side on mobile. How do I ensure that the entire hero image displays properly and the viewer can see all of the text?

Also, I’ve added some margins slightly lower down on the page.. in the section that says “Here’s what we’ll dive into together.” While it looks great on desktop.. the copy is squished and really narrow on mobile. How do I fix this?

Thank you!

[janaboyko]

Also, I will mention that for the content in the “Here’s what we’ll dive into together” section.. I was playing around with the PADDING. I think this is why I am having the issue on mobile. Is there another way to make this text less wide on the page.. but still have it show up ok on mobile?

[serkan]

Hi,
You can add this custom css code;

@media (max-width: 767px) {
.elementor-3057 .elementor-element.elementor-element-494bfd8f > .elementor-container {
    min-height: 90vh; } }

@media (max-width: 767px) {
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: none !important; }}

The last part of the website, you need to edit the box via elementor and check the settings. It is hard to fix it via css code.
Thanks

[janaboyko]

Hello,

Unfortunately the custom CSS code is not working. It is still not displaying the full image at the top of the mobile screen.

[ahmetsali]

Hi,

– you may see the article below for making the background image visible on mobile;

https://elementor.com/blog/website-background-images/

Alternatively you may hide that cover image on mobile and add another mobile friendly cover image and set it only to show on mobile;

https://elementor.com/help/show-or-hide-columns-per-device/

– you can also reset any padding for mobile devices, please see the article below for this;

https://elementor.com/blog/introducing-mobile-editing/

Cheers.