Streaming live at 10am (PST)

Responsive text font size


#1

Hi. Hope you all are fine!

My problem concerns "responsive font size"
Here you have my test page and can see my problem: http://arian-aghilipours-fresh-project.webflow.io/

I succeed in achieving my goal through vh. But now another problem has arisen instead.
As you can see if you decrease the screen from right to left, the text adjusts. It is good. The problem is that the margins between heading number one and heading number two have become too large. I want them to maintain their margins throughout the adjustment.
I do not want a broader gap between the headlines. Even the margins between heading number one and the roof of the background increase. It seems to lose its original position because of the reduction. How can I keep everything in its exact location, with the same margins, despite the decrease. I hope I’ve been clear enough.
Appreciate any suggestions you can give me

Sincerely
Arian


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @arian, could you please help to share the read-only link to the site design as well? https://university.webflow.com/article/how-do-i-share-my-sites-read-only-link

Thanks in advance.


#3

Hi Dave. What will happen when I do that?

Thank you

//A


#4

Hi @Arian, hi Arian, that will allow those who are helping to look and provide a solution, to view the site in Read-only mode, nobody can make any permanent changes, but they can check out the design styles.

Without the read-only link, it is much more difficult to help with styling suggestions, not impossible, but much harder unless you are a css guru who can inspect the published site code.

Screenshots of affected elements in the designer also help a lot, here is a great tool that Webflow uses: https://getcloudapp.com.

I hope this helps


#5

Got it . Done

https://preview.webflow.com/preview/arian-aghilipours-fresh-project?preview=98d4dc3451f553e8a1536b4234fd8877


#6

Hi @Arian, try setting your font height and line height to the same vw measurement:

When I try it with that style, it also makes the line height resize.

I hope this helps.


#7

Perfect solution. Thank you.
I have updated the page with the new adjustment.

Heading number one differs only slightly from the ceiling now. But unless there is an even more accurate solution, I’m very happy with this and can continue. I’m too fussy for my own good… Ýou probably notice

Thanks alot


#8

Hi @arian,

One note, you have only one heading with a text span inside of that heading.

I would suggest to use two heading elements on under the other, one set to heading h1, the second set to heading h2, each with a little smaller vw units, to make it look a bit more even.

I hope this helps.


#9

I tried it now. However, the margins became larger when I separated the texts.
With the span they kept the margins all the way down.


#10

Hi @Arian, thanks, I thought that might help, when I tried it, here is what it looks like for me:

in this example my H1 was set to top and bottom margin set to 10px and bottom heading set to 0px top margin and 10px bottom margin.

You may have to play with it to get the sizing you like.


#11

When I keep the text near the edge, without moving it, it keeps its EXACT position even in the smallest mobile mode. But as soon as I try to put the text in the middle and release the text from the edge, it does not hold its position when you begin to reduce the browser. It moves towards the right, down, or elsewhere. Do you have any suggestions here?


#12

I watched your video. Unfortunately, thats not what i’m trying to accomplish. If you take a look at the latest video you sent me, you’ll see that there are margins created above heading number one, when you decrease and enlarge. It does not retain the same margins all the way. Something loses its position.

My goal is to get the text in an optional place a bit more to the middle. And then, when you reduce the page, I want the text to keep its position to all points and dot as much as possible. No movement, just reduction …


#13

This might be a simpler explanation of what I’m trying to accomplish.
When you create a picture in, for example, photoshop, then adding a text to it, and then save. Everything becomes a single unit, png or jpeg file. Everything is reduced and enlarged in the same way when you view the saved file.

Of course, I can do that. But then I lose the content.
Hope it became clearer now what I want to accomplish


#14

Hi @Arian, yes, I may not be fully understanding what kind of layout you are going for.

Do you want for example the image to be full page and text in middle of page centered vertically and horizontally? and then resize from all four points (top, right, bottom, left) and contract and expand from the middle?


#15

It’s alright brother :slight_smile:
I want to be able to place the text anywhere on the screen, without it moving when I reduce the browser. I want to place it for example 1 centimeter from the left corner of desktop view, and when I’m all the way down for mobile view, I want it to still be 1 centimeter from the left corner. Locked in place. It may only get smaller and bigger, but not move up, down, right, left. :confused:


#16

Also know @Arian, there’s always going to be adjustments needed when scaling down to smaller devices. If you want Fixed text.

1 Then add 1 div and put the text in it. Then fixed the div to top left of screen.
2. Give it large padding on desktop, smaller padding on tablet, and so on.
3. Use padding, instead of positioning if this what you want.

I didn’t mean to pry, but responsive text will Never be exact, just have to tweak to get it right.


#17

I read one post above this one. You would like bind the div and text together more or less? Is that close?

If thats the case:

  1. Use a “Text Link” element: Use W & H %'s
  2. Enlarge it within the div or use it by itself
  3. In Typography: Use 1.5 vw

#18

Gary…
If you look at the page now. And decrease the browser from right to left. Then you can see that the text will adjust to the change perfectly. It stays in its position. But if I move the text a little towards the middle, and decrease the browser it starts moving to the right side from its original position. Gotta be a solution for this :slight_smile:

Here’s the link https://preview.webflow.com/preview/arian-aghilipours-fresh-project?preview=98d4dc3451f553e8a1536b4234fd8877


#19

Cool! I see it now. Do you want the text to stay inside the image underneath it?


#20

I want to have it anywhere in the picture. But I do not want it to move to the right when I decrease the screen. Now that I have the text stuck to the left corner I do not have that problem. But when I put the text closer to the middle, I get that problem.