Unresponsive text on mobile

Design help General
1

Hi! I can’t get my website to be responsive on mobile devices. I need to zoom in and out in order to see it, and the text doesn’t adapt to the browser’s width:

this is my website’s Read only link:
https://preview.webflow.com/preview/censusoutreach?preview=6454db58c9ff92b6ddedd973b6008df0

This is the published link:

Please help!

  • Mayra
2

@mayra… Hey your site is responsive. Take a second and think of it like this. Webflow itself is responsive! Your site is not a separate entity from Webflow, it’s a connected part of Webflow. So the question then becomes, how do I follow the responsive flow of this software? “If I go from 1000px, down to 500px, what will Webflow do?”
It will decrease in size, right? So I just need to share a (%) percentage of 500 to each block of space I’m using.

It’s best if I have 3 blocks of content, that want to share a mobile view of 400… I need to see which one needs a higher percentage of space. Therefore start out with no sizing and no pixel sizes when you lay out content. Let the content push the div blocks. Then look at the spacing and use % percentages to create responsiveness.

3

@mayra… this workshop video can also help clarity, from a visual perspective:

4

First - the HTML and Read-only link are differences.

Publish link problems:

1/2. the text doesn’t adapt to the browser’s width:

First - HTML text - by default is responsive (wrap // matchbox size). Thier is no such term “unresponsive text” (Why you get this problem? because you add extra padding!)

2/2. need to zoom in and out in order to see it

Why? you set font-size: 2.5vw;
Solution: Don’t use vw for text (This works only in very special cases) - change to: rem/em/px

General problems:

container

In general don’t put core-container inside row/col. This is the general structure (Don’t use container when you should use regular div/section - no meaning to put container inside 1/2 desktop col)

container
--- row
------ col  
-------------------- h1

class .homeparagraph transform problem

You had transform (400px down) for this element (Now the p overlap other elements - looks buggy).

Also change this P to display block (no meaning to “display: flex;” in this case).

Last, on mobile - resize logo (You want the menu-icon & logo on the same line)

5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.