How can I adapt elements in a multi-column slider when moving from desktop to mobile view

[TeamStellar]

Hi. I have a test project and looking at some slider layouts but having issues.

On the draft home page of my above project, I have a section DIV with a slider in it with 3 slides. On Slide 3 I have tried a layout which includes a row with 2 columns - the LHS column for a headline & CTA button, the RHS column for an image.

All looks fine on desktop. but not sure what my layout options are for smaller devices. Can the RHS column wrap under the LHS column (what would that mean for the height of the slider)? If not, how should I adapt a multi column slider when moving from desktop view to mobile view.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

https://webflow.com/design/stellar-co-website-style-guide\

[cyberdave (Dave S.)]

Hi @TeamStellar, I would make a couple of suggestions:

1. Make sure all your content in each column fits within the 100% height of the slider so that content does not overflow
2. Maybe instead of using rows and columns, use a flexbox layout in the slider: Visual CSS flexbox builder | Webflow

It is a little hard to visualize what your exact design goal is on mobile, maybe if you can share some mockups would help. I took a look at the page on desktop view, but I am not seeing the same thing as in your screenshot.

Here is a good video: Intro to responsive design | Webflow University

Thanks in advance.