Wrapping Issues and Responsiveness


I am having trouble with the Electrical Services section being responsive. I think the thing to do would be set it to wrap but when the box jumps to the next line it cuts it off. I’m sure its something to do with how the section is set up but I don’t know what to change. Also any tips on making this page responsive on tablet and down would help a lot. I’m trying to learn Webflow so everything that probably is simple causes me problems.

American Upstarts

Hey, keep it up, you’ll get better and better. Flex box is basically what I personally rely on for the most part when making things responsive. There’s a lot going on in your design so I just took a video of me working with it a bit. Hopefully it gives you a better understanding of working with elements when trying to make them responsive.

Typically a lot easier for me to do on a clean slate, but I wanted to do it on what you had already built :slight_smile:

Here you go:

Edit: Vimeo hosted version if the below video takes too long to load: https://vimeo.com/416021154

Okay! Still hasn’t loaded but I’ll keep waiting.

Press the play button in the bottom left and then wait a bit, should load up :slight_smile:

Edit: Here’s a link to a Vimeo hosted version: https://vimeo.com/416021154

Thanks for that. It should help. What about that container I had all the content in? Also I added padding to that section so the content and words that weren’t absolute wouldn’t run of the edge but they do now with your way. I guess that probably has to do with the set width of the services boxes. Unless I did something wrong. I’ll keep messing with it maybe I’ll figure it out…

I wouldn’t try to copy what I did, I threw it together quickly and on top of what you had already built so I don’t assume it will work perfectly. What I was showing was just a general workflow for how you might go about making things responsive.

I personally don’t like working with containers, I just use divs instead. Just moved the content you had into a new div :slight_smile:

1 Like