Hi all! I’ve been trying to figure out what I’m doing wrong with my CSS grid items, but I’m at a loss. They display properly on both Chrome and Firefox, but in Safari, the items in the grid container don’t seem to be aligning to the end of the container (even though “align-items: end” is showing up in the inspector).
Can anyone else see what I’m doing wrong here?
https://www.shainanacion.com/brand-design
Thank you!
wouldnt load at all for me on mobile. the site timed out. tried the root url as well.
Ok now its working. i see on mobile in portrait view everything is good. once i go to landscape that first row of divs below the main part gets messed up. and you have checked the landscape settings for this? i would check the actual size views in the browser rather than shrinking the browser itself. usually you can do this when inspecting the page
Hey John! Thanks for checking it out. The problems I’m having seem to be with the type of browser (Safari) irrespective of aspect ratio. In every test those grid blocks are displaying incorrectly as compared to how they’re displayed on Firefox or on Chrome (see screenshots below):
I see some of the issues now more clearly.
I would try this https://meyerweb.com/eric/tools/css/reset/ to override the default styling that safari adds to pages when it renders them. Seems like a common issue but strange that it comes up randomly. I use chrome for everything but I know most people use other browsers (firefox being one… maybe brave browser more recently)
@John_McConnell Thank you for the idea. I tried that, but it didn’t seem to help; everything looks the same as it did prior to using these overrides.
@Andre Maybe you have some ideas?
Also, this is a better page to see the malfunction on: Ala-carte - Shaina Nacion Design Studio
Update: I was able to solve the problem. For some reason (I still don’t know why this worked) I had to put the grid container into another div with “display: grid” and then it displayed properly.
So if anyone else is having this issue with Safari, try doubling up on your CSS grid containers!
