Responsiveness Help

Design help General
1

Hi, how do i make this responsive across all screens when you squish it. Ive literally tried everything from making the type an svg, playing with the settings nonstop. Can anyone pls help me, or tell me what I can fix.

Here is my site Read-Only:https://mayas-portfolio-906c47.webflow.io/
(how to share your site Read-Only link)

2

Hi there,

There are several ways to test and ensure your site’s responsiveness in Webflow:

In the Designer, you can test different viewport widths by clicking the preview icon and dragging the canvas edge to resize it. For specific screen sizes, click the canvas dimensions at the top of the Designer and enter your desired width.

Webflow provides preset breakpoints for common device sizes:

  • Desktop (default)
  • Tablet
  • Mobile Landscape
  • Mobile Portrait

You can also add three larger breakpoints (1280px, 1440px, and 1920px) to accommodate bigger displays. For best results, make your designs responsive from the start by using flexible layouts and relative units. You can learn more about responsive design best practices in our responsive design guide.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

@maya2

1. Use Fluid Typography (Clamp Function)

Instead of fixed px or vw units for font size, use clamp() to make font sizes adapt smoothly across screen widths.

css

CopyEdit

font-size: clamp(2rem, 5vw, 5rem);

In Webflow:

  • Select the large text element (like the name or headline)
  • Under Typography → Font Size, switch to “Custom” and enter the clamp value directly in the custom code or via an Embed or custom CSS class.

2. Avoid Using SVG for Text

SVGs don’t scale well in responsive layouts when you want content to flow naturally. SVG text is great for logos or icons, but not ideal for large text blocks across breakpoints.

3. Use flex-wrap or Grid Responsively

If you’re using Flexbox:

  • Make sure flex-wrap: wrap is enabled so that text can break into new lines on smaller screens.
  • Set min-width on child elements to 0 to allow wrapping and avoid overflow.

4. Set Max Widths + Padding

To prevent content from squishing:

  • Set a max-width on containers (e.g. 1200px)
  • Use % or vw-based padding for consistent spacing
  • Avoid fixed width (px) elements on mobile breakpoints

5. Test All Breakpoints in Webflow

Go to:

  • Webflow Designer → Top of screen → Choose different breakpoints (Desktop / Tablet / Mobile Landscape / Portrait)
  • Adjust typography size and spacing per breakpoint (don’t rely only on Desktop styling)

6. Fix Overflow Issues

If content is getting cut off or causing horizontal scroll:

  • On all wrappers and sections, set overflow: hidden or auto
  • Inspect elements in Webflow and check if anything is forcing width beyond screen (usually min-width, large vw fonts, or SVGs)