Streaming live at 10am (PST)

Change Flex items direction on mobile viewport

Hi there! I’m new, & late to Webflow age-wise and finding it a challenge but stimulating but I’m stumped on this issue and would really appreciate some help/ideas please.

Read-only attached: design as per desktop (alternating paragraph+image on 1 row then image+para on next, etc), works fine for desktop & tablet but it’s horrible on mobiles.

So, I need help, please about what’s the best way to accommodate the content across all breakpoints. Maybe the design needs to change to a vertical structure as I’ve tried grid/flexbox and even then, I’m uncertain, so specific settings for layout, sizing & positioning would really help.

Many thanks in advance.
Johnni

https://preview.webflow.com/preview/johns-test-pages?utm_medium=preview_link&utm_source=designer&utm_content=johns-test-pages&preview=ba7f123f58fe24b2b0fb28116ef552de&workflow=preview

@johnni I’ve reviewed the read-only link. I think that you are new to webflow and you don’t have any knowledge of webflow. please watch webflow video on youtube.

Thanks for responding. Yes, while I am new to Webflow, I have watched almost all Webflow University but thanks for the suggestion anyway.

hi @johnni and welcome to forum. The basic flow of Flex Box direction is column and that’s why are elements set next to each other, to place these under each other they have to have row direction. For some reason WF invented their own CSS terminology horizontal and vertical for flex directions.

So on your mobile viewport just change flex direction to vertical for div-block-14. You can also change elements width from 50% to 100%.

Hope that this will help.

PS: WF is only GUI for HTML and CSS so it will be beneficial to take some CSS course on YT to get better understanding how to build things in WF. I noticed that you have watched all WF videos and if you have successfully finished 101 then try portfolio course as have responsive design principles included.

Stan, Thank you so much. That’s very helpful and supportive.

1 Like

hi @johnni if you do not have further question related to your issue and response helped you to solve your question feel free to close this request as solved :wink:

Thanks Stan. You’ve been really helpful.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.