Step-by-step Fotomatic guide

Projects Off-platform Practice Projects
1

For anyone struggling with Fotomatic and looking for some help, I wrote a step-by-step guide on how I approached and completed the project.

Big shoutout to @giofar and @petal who previously shared their solutions, which I found very helpful.

5 Likes
2

this is great! thank you for putting this together and sharing :100:

2 Likes
3

Glad you found it useful! :sunglasses:

1 Like
4

You are a crack bro! Very thorough guide! :+1:

1 Like
5

I have a question, how did you find out the height and padding dimensions for the header for the tablet size? it is not shown in the spec and you declared them:

header .content {
    height: 4.5rem;
    padding: 0 1rem;
}

Thanks for the help!!

6

Just my best guess, and you’re welcome! Glad it came in handy.

7

All right then! I imagined so, but I feared I was missing something.

Thabks again!

8

Hello Bud!

I finally finished my Fotomatic project (at least I’m not investing any more time with it jaja), I used your live website a lot to compare and inspect.

I think there is something missing though.

If you set your window to around 450px, the header viewports start getting messy. Because you have min-width set to 1 in the meta tag this gets hid, but you still can scroll to the right.

image
image1907×969 123 KB

Looks like what is causing this is the #sign-up-cta .content width property set to rem

I hope this helps.

Saludos!!