Section dividers issue

[yingfuli]

Hi, I’m using the section dividers that come in Design Cloud - https://fitklub.nl - and while it looks okay on desktop and when matching the colors of the divider and the section beneath it, I’m having trouble adjusting it on iPad and mobile screens.

As you can see in the attached image I can’t seem to have it ‘glued’ to the bottom of the top section. How can I achieve this? And perhaps is there another resource for adding svg-dividers?

[tristup]

Hi @yingfuli,

Thanks for reaching out.
It seems that the top margin is the reason behind your issue, you need to adjust the margin for the specific screen sizes. The following code will work only for the maximum screen size of 1200px. For another screen size, you need to adjust the margin. You need to add the following custom code into the Customize > Element CSS of that specific section.

@media  (max-width: 1200px) 
{
    $el.x-section 
    {    
        margin: -5.9em 0em 0em 0em;
    }
}

You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[yingfuli]

Thanks, that did the trick. Problem was that the content area (though in the new Pro that is no longer available, so I have to use ‘raw content’) had its own css from the Cloud Design. Anyway, it has been fixed.

[marc_a]

Hi @yingfuli,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.