Hi all, I’ve got my website looking good on Chrome but the layout completely breaks on Safari. I’ve got some hidden images that appear on hover but it doesn’t work at all Safari. Here’s the read only share link: Webflow - Marisa Jensen
I know the structure is a bit messy, I’m still coming to terms with how to use Classes etc so it’s all been a bit hack-y! Any tips on how to clean things up would be great too.
Thanks!
Hi @Marisa_Jensen, I’ve checked both safari & chrome. It seems like the root of the issue lies with the Thumbnails/Hidden images’ positions are set relative to the Body element. Which causes the image position to shift greatly when the Body element changes in size.
I would fix this by first setting the Container to Position: relative. In this case the Thumbnails’ position will all be relative to the size of the container, not the body.
Another thing you can look into changing is specifying a height for your Hero section or your Profile image. This will prevent the image to enlarge on Safari.
Hey @dennyhartanto, that seems to have worked — thank you so much! I really appreciate the help, and the quick response too!
If you’ve got any further tips on how to clean things up, I’d love to hear them. Either way, thank you!
Hi @Marisa_Jensen, glad it was helpful. Aside from that the other structure looks okay. Though, I saw that you have also explored including the Thumb inside each of the Project Descriptions. I would go with that approach.
