Weird spacing on Mac's

Hello,

My client is saying when viewed on his Mac that, there is a distortion of spacing on this site. I have had fellow colleagues check it out on their Mac and it is fine. 

What is causing this issue and is there a code solution? 

Thanks!

arizonaturfmasters.squarespace.com

password: 1234

Do you have any specifics? Details, screenshots?

I'm glad it looks fine to you and your colleagues, it's frustrating when your client is the only one that sees a problem! Been there!

On 7/12/2023 at 11:33 AM, Ziggy said:

Do you have any specifics? Details, screenshots?

I'm glad it looks fine to you and your colleagues, it's frustrating when your client is the only one that sees a problem! Been there!

Yes, attached is what my client sees.

That looks more like an iPad screen not a MacBook.

Is the concern that the 8 Hours image is quite tall?

You have the height set to M which sets the minimum height to 66vh (i.e. 66% of the viewport height). The sections above and below are set to S i.e. 33vh.

So on a tablet screen this can exaggerate the space.

1 hour ago, Ziggy said:

That looks more like an iPad screen not a MacBook.

Is the concern that the 8 Hours image is quite tall?

You have the height set to M which sets the minimum height to 66vh (i.e. 66% of the viewport height). The sections above and below are set to S i.e. 33vh.

So on a tablet screen this can exaggerate the space.

I asked and he said it wasn't a tablet... 

Fair enough, I guess it's a half-width browser window.

On 7/12/2023 at 8:49 AM, CaresaCreativeCo said:

Hello,

My client is saying when viewed on his Mac that, there is a distortion of spacing on this site. I have had fellow colleagues check it out on their Mac and it is fine. 

What is causing this issue and is there a code solution? 

Thanks!

arizonaturfmasters.squarespace.com

password: 1234

I agree that does look like an iPad as said prior. The only thing I could think they would be talking about is the logo looks like it should be rounded out and is squished due to header size.

Let me know when you find out what the specific problem is and I will try and help.

2 hours ago, Ziggy said:

Let me know when you find out what the specific problem is and I will try and help.

It's a large monitor. I just got off a meeting and saw the screen share. I have never run into this issue before. 

18 minutes ago, CaresaCreativeCo said:

I have never run into this issue before. 

What is the issue?

The weird spacing on Mac.

I think about I need to increase the page width of the site past 3000px. 

3 minutes ago, CaresaCreativeCo said:

The weird spacing on Mac.

To help us understand, can you annotate some screenshots and post them here to demonstrate the issue you are seeing?

1 minute ago, paul2009 said:

To help us understand, can you annotate some screenshots and post them here to demonstrate the issue you are seeing?

Yeah, so attached is what it should look like; the attached screenshot earlier in this thread is what the client is seeing on his high res monitor.

Can you see the issue below? I've tested it on iPhone 8, iPhone 14 Pro Max, iPad, Macbook Pro as well as a 5K Apple Studio display and I don't see anything unusual.

48 minutes ago, CaresaCreativeCo said:

Yeah, so attached is what it should look like; the attached screenshot earlier in this thread is what the client is seeing on his high res monitor.

Like Paul said above – it looks totally as it should.
But what I encountered with some clients in the past is the fact that they do not comprehend fully the concept of responsive design. Sometimes they expect that webdesign behaves like a static PDF or print document where everything stays at the same place when resizing. I have multiple discussion with some clients until they fully grasp the concept. Maybe it is that – or I oversee something.

T

20 minutes ago, paul2009 said:

Can you see the issue below? I've tested it on iPhone 8, iPhone 14 Pro Max, iPad, Macbook Pro as well as a 5K Apple Studio display and I don't see anything unusual.

  

The button is distorted in tablet view, but nothing else shows. So weird - his had some extra white spacing that messed up the flow of the design. I can only think that it is something wrong with this monitor settings, but he has checked that as well. I know his base resolution is 3840 x 2160. 

You can improve the button design on tablet view by adjusting the horizontal padding, and making them a couple of columns wider.

Go to the styles menu and Buttons and adjust the first value from 2em to 1em.

You could also experiment with having the buttons set to fit instead of fill, but making sure you don't make the block too small.