Homepage Grid Behaviour

[feeohnah]

The homepage needs to have consistent padding between images, right now it fluctuates based on the window dimension. The only variable should be the outer margins between images and the window edges. The padding should always be 60 between images and 75 (or 74) between rows.

Based on the mockups these are the grid specs we should be hitting at each breakpoint.

375px ~24 px between each image

1024px ~60px between images ~74px between rows

1440px ~80px between images ~94px between rows

1920px ~101px between images ~114px between rows

[MattSelf]

Just one note is that in Safari it seems to only spread to 2 images per row, and doesn't go to 3.

[feeohnah]

@cartogram confirmed. I think it might be related to this flex/safari bug

[feeohnah]

@MattSelf ready for you to review this one

[MattSelf]

Looks great!

[feeohnah]

@MattSelf great. Let us know when you are ready to launch!

[MattSelf]

I think the only thing left is changing the text from "STUDIO SELF" to "Matthew Boyd" in all instances, and we should be good to launch. I'm having text proofed right now, but should be done by today. Even if the site is live no one knows about it, so we can probably launch tomorrow. Let me know if that works.

[feeohnah]

@MattSelf Okay, I think I got them. It was just the one in the load screen that you can't change via Siteleaf, the others are all set by the site title in the Settings area.

Couple of other things I just thought of:

1. Do you want to add a favicon image for the browser tab?
2. Have you created an email account for this new domain? I updated the domain in the contact information, but just want to make sure that emails sent there will actually get to you.

[MattSelf]

Great. Just one thing, could you make sure its mixed case Matthew Boyd instead of all caps?

1. I can create a favicon, i think thats a good idea.
2. I was waiting until I solved this URL issue and just settled on all of that yesterday, so today I'll set up mail forwarding and an alias. I can always edit the contact info on my own.

Thanks!

[feeohnah]

@MattSelf sure, no problem. And it's up now, so whenever you're ready to promote it :) http://www.matthewboyd.studio/

[MattSelf]

Amazing! thank you. Although I think something might have happened to the scaling at the largest size? The images look smaller than they did this morning.

Also what is the best type of file for a favicon?

[feeohnah]

@MattSelf any type of vector file is good (svg, ai) just so I can save it at the sizes I need

Will look into the image sizes. Nothing should have changed there.

[MattSelf]

Yeah, strange. Every other device/size looks fine it just on desktop they are much smaller. For example there were rows of 3 and 2, depending on the images, now everything is a solid 3x3x3.

I'll send over an AI file momentarily.

[feeohnah]

@MattSelf I'm still seeing rows of 3 and 2 at 2210px. Can you try clearing your browser cache, giving it a couple of hard refreshes, and then looking again? If the issue persists can you send me a screenshot?

[MattSelf]

So strange. It looks fine at that size but what I was looking at last night and this morning at 2560px (after a lot of refreshing of caches - i don't think that was the issue) was much larger. Right now the images don't get larger than 675 x 500 when they should be 800x600. This is really only an issue at the biggest size.

If this helps, I saw the images at this same size briefly in the afternoon when I was updating content and you were still deploying changes, but eventually the site ended up having much larger images.

[feeohnah]

@MattSelf okay I think we got it. Give your browser a bunch of hard refreshes and let us know if it's working as expected for you!