Streaming live at 10am (PST)

Webflow Preview and Published Site dont look the same


#1

Hi Guys,

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.

thank you

https://preview.webflow.com/preview/koenigundsuess?preview=ba75338c6ee76114ed9a0b7507c00a7c

Here is my public share link: https://preview.webflow.com/preview/koenigundsuess?preview=ba75338c6ee76114ed9a0b7507c00a7c
(how to access public share link)


#2

Hey @George_Konig,

I'm not sure if you have already found a solution for your problem, but the link you shared is broken.
Can you please have a look at it ?
Thanks,


#3

Hey @zbrah,

i had to change it once, but i edited so it should show the current link now.
https://preview.webflow.com/preview/koenigundsuess?preview=ba75338c6ee76114ed9a0b7507c00a7c

Best,
George


#4

Hey @George_Konig,

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.

What you could do :

Put client information on relative

Give `client heading wrapper the background color of the slider.

That way you won't have any overlapping issues since the H1 will push the slider down.

Hope this helps


#5

Hi @zbrah,

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.

Any idea?


#6

Hey @George_Konig,

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

Remove flexbox on Client heading wrapper

Put top absolute on Client information


#7

Exactly what i was looking for. I also change it, so i only have one H1 now. Thanks for your advice!


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.