This post was flagged by the community and is temporarily hidden.
The issue here is the following:
Your first image shows the base breakpoint, the 2nd image shows you the actual output on your desktop browser size.
Since you also edited breakpoints above the base breakpoint, your edits will be shown depending on the display size of your current device.
Please check this article to understand how breakpoints work:
hi Marius, thank you for answer. I know about the breakpoint and usually adding larger resolution didn’t affect how the website looks on smaller screens. Do you know how I could fix my current issue?
You are right. Edits for larger screens do not inherit to the base breakpoint and below.
Can you please clearify in detail what exactly you are trying to achieve?
Which elements are not doing what you have in mind? And what should they do instead.
hi Marius, the website was supposed to look the way it looks on the first picture I posted in my initial message above.
But then the text in the middle and the Women / Men words look way scaled up when published. Another person sends me the screenshots of how it looks at his end: please see attached
I believe some issue happens on the stack between the Regular Desktop View and the Table View… Or…?
The text scale issue is one thing.
But then this cut out head is the second thing. Maybe because when I add this picture to the DIV block as the background picture and choose Cover, that’s why it keeps shifting beyond the edges? I think if I chose Contain, the pictures edges won’t go beyond the screen? But in this case how can I make sure that if I choose Contain it covers the full screen on all resolution sizes without tiling (repeating) and without a white area to be seen under the picture if I remove Tile?
I am not quite sure if you understand the behaviour of breakpoints.
The text “scales”, because it was set in that way in the breakpoints.
“xxl” is the largest breakpoint, and for that the font size was set.
Also to all the other seperat breakpoints.
Just adjust your CSS and the problem is fixed in a couple of clicks.
Regarding your other issue:
Just change the background position from 50%, 50% to 50%, 0
Keep in mind that you also have several different break points for that!
Hope that helps.
hi. the thing is that on the original desktop the font was 50px and on the XXL the font is set to 100 px.
So when you open the website with a screen with a resolution lower than 1200 px the font that is shown not 50 px for sure. It is is much larger font size. So why would it inherit the size fro the larger resolutions and not from the nearest original desktop resolution (the one that is initial Webflow resolution before you add more break points)
On my end this works exactly as it should. The font size scales as it is set in Webflow.
Tested on your preview and on your live site.
The issue might be on your end.
wow… that’s really upsetting… so how come it looks the way I attached on the latest screen photos…?
just wanted to thank you because the advice to change from 50%/50% to 50%/0- really helped and it fixed it.
I am hoping to find the solution for the second issue though
I just want to stress again that the actual size of the base breakpoint is 1279px (what you see on your first image on your initial post). It is the initial state of your visual editing. Do not see it as a general breakpoint which displays full desktop browser width, IF you use other breakpoints for your design.
So it actually makes sense what is going on here.
I still think there might be some kind of misunderstanding in your design approach.
If this is not the case, I can assure you, all CSS regarding the text sizes works without any issue and as intended.
If you need further help, just return to this topic or open a new issue related one.