Resizing and centering text responsively

Hello! New to webflow here. I am trying to design heading responsively with little luck. It has a link inside which formats so wrong when I try to make it a flex text. Any insight on the best way to make this block of text to where it looks good on all devices without having to adjust the size of the font exponentially.

I’ve also tried adding a span to elements of the text so that certain points move to the next line. But there’s no consistency with what word adds to the next line! Frustrating! Wondering what I am doing wrong?

https://preview.webflow.com/preview/madeline-anthony?utm_medium=preview_link&utm_source=dashboard&utm_content=madeline-anthony&preview=e84f331fec2cca119181ec2bc7a1547a&mode=preview

Thanks so much!

“Exponentially” is a bit too much :smiley: at worst you chose a size for Desktop, then adjust it for the 3 other devices. That’s 4 different sizes and the last 2 should be the same.

There is a way to make your text size relative to the width of the viewport (using vw unit, meaning %age of the width of the viewport/browser), but you shouldn’t use this too often: text is important and its size should be chosen wisely.

Ypu should start every project with a Style Guide page and lay out all the titles, all the paragraphs, lists etc, and define text size once and for all. Down the road you’ll just deal with exceptions.

Also, set a test size and line height to the Body element, then use em for units of the text, and no unit for the line height everywhere else. em is a value beased on what’s defined on the body, and no unit for the line height means relative to the text size.

I can explain a bit more in a short video:

Thank you @vincent!! That solves the problem of adjusting text sizing!

However, I have another issue of setting text box in div box so that at different widths on the viewport, the text remains centered? Currently, when I drag the edge of the canvas to test responsivity, the text maintains margins to the left and there’s lots of space on the right side. For desktop, the centering is fine, but tablet and mobile are a different story. When I change the text to flex layout, it reformats the text completely in a really strange way. I’ve adjusted the size of the text box and still it reformats the text in a way I don’t want at all.

Thank you so much for your help and insight!!

Once I get the hang of completing a few projects, I will definitely create style guides from here on out! That is such good advice.

I had a look at your project and I oculdn’t really provide a clear advice for improvement, as the structure itself deserves to be remade in a simpler way. What you did works, probably like you wanted it to, however it’s a bit unorthodox, making it hard to maintain.

So, what I can do is to show you how I’d build some of your sections, provided that you show me some designs (can be pen and paper) of what’s intended for each device. On the way I’ll try to explain why certain choices are made, and how to spread the layout properties between several elements. So don’t hesitate to describe this or this other element and I’ll show you how I’d do.

2 Likes

That is helpful! I structured it from how I learned from webflow university by watching some of the tutorials building a portfolio website. From my understanding, all elements in a section should be wrapped in a container and those individual elements should be nested in divs?

I will get those sketches up to you as I’ve been designing in adobe xd.

Thanks so much, again!

OK it would look something like this! On the desktop the text ‘Madeline and Anthony are getting married!’ would stay fixed to the page. It would not move as you scroll. But the navigation would move changing colors throughout the background. The main text that is left aligned would be centered on the page.

Let me know if you have any questions about this mock up. (I can certainly compensate you for your time for teaching me webflow). Let me know your rate before getting started.

Thank you!

__
[

]

Also, there is a page for photos that I will link in the heading. But I imagine once I figure out how to do this main page, I can structure the image page myself using the grid.

Hi @vincent, I rewatched the creating a custom portfolio website and discovered a mistake I was making was putting all of the elements in a container instead of a div named container. But still I am not able to center things. I know it’s the weekend so completely understandable if you cannot explain how to properly set up a page until Monday. But let me know if you are unable to get to this so I can keep asking around. I’d like to have this figured out by Tuesday or Wednesday! And like I said, I would love to compensate you for your time explaining this to me.

Thanks so much!

Very best,
Whitney

Hi, I did a short build to show you how to create a simple yet effective structure with your own crafted container.

Let’s start with that:

Thank you so much! This makes so much sense and is so much easier. However, when I drag in the div box before naming the class ‘my container’, the div box spans the entire frame. I turned on the hide guide overlay, but maybe I am missing an initial step?