Zoom shrinks/hides content

So ive come across an issue with my website https://www.taskforce626.com. The issue im having is that when i scroll in/zoom in the content of some of the widgets i have in place gets distorted or completely hidden and i do not know how to fix it. I tried a couple Addition CSS overflow commands but nothing fixed it. My knowledge on CSS and HTML is somewhat limited. Looking for any help with this issue, Thanks in advance!

Hello,

Can you please provide some explanatory screenshots?

Kind Regards, Roman.

Yes, if you scroll in you can see that some content on the front page becomes hidden, or if your in mobile viewing the front page it also has the same content hidden, screenshots below:

Hello, thank you for the screenshots.

It’s a SiteOrigin slider widget issue, but you can try to use the following CSS code as a workaround.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 640px) {
    .sow-slider-image-wrapper .sow-hero-buttons {
        margin-top: 15px !important;
    }
    
    .sow-slider-image-wrapper .sow-hero-buttons a {
        padding: 10px 20px 12px !important;
    }
    
    .sow-slider-image-wrapper h6 {
        line-height: 1.2 !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

This worked for the button, but the other image of just the text is still cut off when scrolled in and in mobile view :confused:

Okay, now you use SiteOrigin slider widgets there.

However, it looks like it’s better to use editor widgets instead, and set row background to achieve similar look.

Kind Regards, Roman.