Generally speaking, here’s my suggestion on how to handle the native slider component:
If the slider needs a height assigned, only apply the height to the main component. Items inside of the main component will follow this height. The native slider component is not vertically responsive, so the slide with the tallest content will dictate the height of all other slides.
Remove the class you’ve assigned to the slides themselves (CS_slide_1, etc)
It’s best to avoid applying any styles to the actual slide. Instead, add a generic div and give it a height of 100% and width of 100%. This will adhere to the height you’ve assigned to the main component.
You’ll design everything inside of this div.
Note: do not use a container element inside of the slide like you have now. Instead use a regular div.
You can remove the class that’s assigned to the mask. Again, Its height will be dictated by the height you’ve assigned to the main component.
Now that you have the generic div inside of the 1st slide, you can change its “Layout” to “Display = Flexbox”. Drop two divs inside of this and give them widths of 50% (which will recreate your 2-columns) Again, generally speaking, I’d advise to NOT use the Webflow “column” element. Instead, create your columns like I’ve stated here or use a grid element.
Attached a screengrab of the structure I’ve outlined.
