Responsive & line breaking

Hi again, dear webflow community :wink:

I’ve gotten a bit rusty since I haven’t used WF in like 2 years a lot! I wondered if somebody could help me with two issues:

Been using the untitled UI library to design a page more quickly, but now that I published it to a staging-link it does two weird things:

  1. Using Chrome’s responsive function to slide width a bit, the page sections sometimes resize more than the text, so the white background some sections have gets smaller than the viewport, even if I did a white background and had the remaining sections grey, the problem would be the same just reversed.

  2. Secondly, the text in lists will not break (but it might be related to 1.?), no matter what I do, which causes issues on smaller viewports, like mobile.

I would very much appreciate any help I can get! Thank you very much,
M. Orth.

smart-carport.webflow.io ← staging

read-only:
https://preview.webflow.com/preview/smart-carport?utm_medium=preview_link&utm_source=designer&utm_content=smart-carport&preview=b88ab7de51aeb5a0bfd8ff7c32f957a0&workflow=preview

hi @M_Orth the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @M_Orth

To your issue:
I do not understand what you mean by “untitled library”. The request in Q1 can be anywhere on any page of your website. Unfortunately, I have no time to pull out my crystal ball to find where to look. Please next time be more specific and it will be nice if you follow the forum guide rules.

Anyway,

  1. for list items line break use white-space: break-spaces or pre-wrap depend on what are you after
  1. ( Not requested but should be fixed) Your image in a slide should have min-width instead of max-width to be able to cover the slide area.

Hope you will find it helpful

1 Like

Hi @Stan,

thank you for your reply, and sorry for missing the etiquette, some of that is new to me.

I figured that Chrome does weird things when using the developer tools to look at how something behaves responsively (?) because just resizing the browser window does something else entirely.

I figured out some item was set to flex that shouldn’t have been, and that’s why the lines didn’t break.

Thank you for your tip with the slider!

Have a nice day & best regards,
M. Orth.