Streaming live at 10am (PST)

I have some trouble to make my design responsive

Hi guys, I hope you are all doing well !

My today’s problem is about making my design responsive. Im quite a beginner as a webdesigner, and on Webflow, so it’s sometimes very hard for me to do simple things.

I want to put on a dedicated page some examples of leads that my company can find for the business of our clients. We want to show : the text message / the job in the company / the company name / the logo of the company.

To do it, i built some kind of “testimonial areas”. But i’ve got a problem : I don’t manage to make those “testimonials areas” responsive… it looks good on desktop but when I swap to mobile, the content doesn’t shows up correctly. I tried to find responses on the internet but I still don’t manage to find the solution. I’ve got the feeling that the solution is very simple and it get’s on my nerves :frowning:

Here is my read only link : Webflow - Yanis - Version Testing

Thank’s for the help !

Have a great week-end :slight_smile:

Yanis

Hello,
I will suggest you to try some mobile responsive plugins according to your site. These plugins will help you to make your design responsive to the computer as well as mobile.
Good luck.

1 Like

The main reason you’re noticing issues on mobile is because you’ve set a width on your blockquote elements:

Moving this style from width to max-width will prevent the blockquote elements from getting larger than 750px (so your site design appears the same) however it will allow them to get smaller if needed:

With that change alone you’ll find that your design works great down to the mobile landscape breakpoint:

Once you get down to the smallest breakpoint (mobile portrait) you’ll find the two column layout with your testimonial and image really start to get cramped, but thankfully you’re already using flexbox!

Just change the flex-direction of your “Div Block 72” element to vertical (although I’d also recommend updating this class name for future use :wink:) on that breakpoint specifically and now your testimonial cards stack nicely:

Protip: If you decide you’d like the image to appear before the testimonial text, just click the small left/right arrow icon to reverse the layout:

1 Like

Wow, it works really nicely, thank you so much @mikeyevin !

I’ll apply all your tips to improve this project !

Thank you again for your help, have a great week :slight_smile:

1 Like