Streaming live at 10am (PST)

Formatting feature list correctly in mobile view


#1

Hello,

I have a fairly simple ‘feature list’ which displays a picture on the left of the screen and the text on the right, and then vice versa for the following feature, and so on. In mobile view though, I would like to all look the same, with the picture on the top and text underneath - can someone help me to figure this out with out changing how the desktop view looks?

The link to the site is https://preview.webflow.com/preview/joshs-fantabulous-project-3fb709?preview=3ee8348f42a81aa5799afcbca7a52245, and you can see what I mean on the pour in place rubber surfacing page under products (Base preparation and edging features)

Thanks,
Josh


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


#2

What I would do is remove flex box from the styling for those elements and use floats instead. Then you can remove the float attribute on mobile and change the display to block which will stack them. I avoid flex box whenever possible. I’m sure you can do this with flex box if you want to tinker but floats are far easier and more compatible with older browsers anyway.