i am recreating my design portfolio and got stuck on a problem for a couple of days.
Using the device simulation option withing webflow the layout seems alright, except on vertical mobile (last one).
When i view it on the actual device Ipad and Iphone 6 i got different results (see screenshots).
The text moves to the right and the about me section is not fully visible.
Maybe you guys have a clue whats going on.
UPDATE: I noticed that it seems to be an issue in firefox and safari.
I’m not able to reproduce all the issues you had.
What is sure :
Right now Client information is set to absolute, in a parent div with no height.
What does it means :
even if you see it on webflow, since the div has no height, plus children in absolute the H1 won’t push the content (slider here) down.
That is why your text is overlapping your slider.
thank you for your response and sorry for my late answer. I was hoping there i a general solution for it. Problem with giving the “client heading wrapper” the color of the slider is, that i need a new wrapper on each sections to match the different colors of the sliders.
The other point is, that i only have this issue with safari. Chrome and Firefox seem to display it just fine.
Whats also confusing is, that when i set the flex layout of the “client heading wrapper” to justify:start, it looks the same in all browsers. Only justify:center seems to have this issues.
You could use combo classes for the different color.
It wouldn’t need a new wrapper for each section that way.
The issue is i’m not sure to understand what you are trying to achieve.
If you just want to center H1 client information (BTW more than one H1 on a the same page is not a good idea for SEO. You need one H1 on your page, then multiple H2 if you want) just do that
