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
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.
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
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.
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?
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 …
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
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?
It’s alright brother
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.
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.
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
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.
