[HUSTLE] embeds scroll on mobile

On mobile devices my embeds got scroll inside and user cannot see full content. Any way to force this to have full height on mobile without scroll?
During the chat we fix the first embed via this code:

@media all and (min-width:320px) and (max-width: 783px) {
.hustle-modal.hustle-modal-cabriolet section .hustle-modal-message{max-height:1000px !important; height: auto !important;}
}

But rest of embeds got inside content and we could not find correct solution.

Thank you

  • Katya Tsihotska

    Hi Rob

    Hope you're having a great day!

    In order to fix the rest of embeds on your site try to add the following CSS:

    @media all and (max-width: 783px) {
    .hustle_module_shortcode_wrap .hustle-modal section .hustle-modal-message {
        max-height: none;
    }
    .hustle_module_shortcode_wrap .hustle-modal-one .hustle-modal-body section {
        height: auto !important;
        max-height: none;
    }
    .hustle_module_shortcode_wrap .hustle-modal-one .hustle-modal-body section article {
        max-height: none !important;
    }
    }

    You can add it to the Appearance -> Customize -> Additional CSS section. If you don't have such section, you can use the Simple Custom CSS and JS plugin to add any custom CSS to your site.

    Let us know if this doesn't work for you.

    Kind regards,
    Katya

  • Rob

    Hi Katya!

    After adding this code in theme customatize area - I can see changes in the mobile view for embed 2, 3 and the last one. the first one still is cutted on mobile view. I cant see any additional CSS to delete. Also the mobile layout of the embeds does not look nice anymore - the logos are very small. Mobile they shall be centered and bigger - can we get this somehow? access still is granted.
    P.S: to be precise, there has been another code already:

    .hustle-modal-body img {
    box-shadow: none !important;
    }

    But I assume - these both CSS codes do not affect each other - right?

    thx, Rob

  • Katya Tsihotska

    Hi Rob

    Hope you're doing well today!

    The code you've mentioned shouldn't interfere with the code provided in my previous reply, so don't worry about this.

    In order to fix the issue with the first embed and with images, try to replace the previous provided CSS with this (this is an updated version):

    @media all and (max-width: 783px) {
    .hustle_module_shortcode_wrap .hustle-modal section .hustle-modal-message {
        max-height: none !important;
    }
    .hustle_module_shortcode_wrap .hustle-modal-one .hustle-modal-body section {
        height: auto !important;
        max-height: none;
    }
    .hustle_module_shortcode_wrap .hustle-modal-one .hustle-modal-body section article {
        max-height: none !important;
    }
    .hustle-modal .hustle-modal-message p img {
        width: 100%;
        margin-bottom: 40px !important;
    }
    .hustle-modal .hustle-modal-article a {
        box-shadow: none !important;
    }
    .hustle-modal .hustle-modal-article a img {
        width: auto;
        float: none;
        display: block;
        margin: 0 auto 40px auto !important;
    }
    .module_id_3 .hustle-modal .hustle-modal-article a, .module_id_4 .hustle-modal .hustle-modal-article a {
        display: block;
        overflow: hidden;
        max-height: 200px;
    }
    }

    Let us know how it works for you.

    Kind regards,
    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.