Whoa, big difference between Safari and Chrome!

Design help General
1

I’m working on the Portfolio project and I primarily do my work on Chrome on a MacBook. However as I was looking at my site on my iPhone I was noticing that it doesn’t look nearly as nice on that device as it does on the 320px breakpoint as I edit in Chrome. As this made me curious I popped open Safari on my laptop and it displays on those smaller widths much as it does on my iPhone.

I’ve attached a screenshot here: the left is my project on Chrome, which looks rather nice, and the right is my project on Safari, which looks less nice.

Further adding to my confusion is the fact that when I pop my site open on Chrome on my iPhone, it looks like it does on Safari on my phone, which is to say not like Chrome on the desktop pictured here.

Are there things like breakpoints, but for browsers? In other words, is it possible to design for particular browsers and for the design to respond to the browser, as well as the size?

Thanks for your time.

Jason

Screen Shot 2021-05-09 at 3.11.50 PM
Screen Shot 2021-05-09 at 3.11.50 PM1791×947 261 KB

Here is my site Read-Only: *Webflow - Jason Brown's Portfolio
(how to share your site Read-Only link)

2

hi @Zero_Protagonist the problem is that Safari is not recognizing the height: 100% on the img elements. It’s just a different interpretation of the spec. There is a several ways how to make it work across all browsers and you can find some answers about how to make it work here on forum.

One of them will be to wrap content of grid item in div element. But in your case it will end up with complete collection and items structure redesign. This will be IMO the good solution to prevent any unexpected odd behaviour. Another approach can be done by using flex. Simplest way for you case will be on mobile viewport switch from grid to block. :wink:

3

Very good, thank you so much! This was incredibly helpful!

Jason

4

An easier way would be to just set the image height to AUTO for the mobile screen size as described in the below article. The browser will scale the image proportionally automatically.