Product Landing Page Feedback :)

[cehrlich]

Here’s my Product Landing Page project. I know it’s very high contrast, but I wanted to have a bit of fun with layouting and graphics.
https://codepen.io/c-ehrlich/full/oNYKvdq

I’m still having a tough time with flexbox… for example, on these fields sometimes the button takes up the entire horizontal space, other times it’s off by a pixel. Anyone know the reason for that?

And the images in the footer are getting squished in iPhone Safari even though I declared their dimensions. What mistake did I make there?

Also any advice on how to make my CSS file more readable? For example when 5 classes have the same padding but a bunch of other properties that aren’t the same, is it worth grouping the padding even though I’ll have to declare all the other properties later on?

And of course any other feedback would be appreciated

[ErFy]

Hello.
The landing page looks great and impressive.

Here are some tips with comments to make it look a little better.

@cehrlich

And the images in the footer are getting squished in iPhone Safari even though I declared their dimensions. What mistake did I make there?

#footer {
    display: flex;
    justify-content: center; /* Instead of center, use space-between*/
    width: 100%;
    border-top: 1pt solid;
    border-color: white;
    margin-top: 32pt;
    max-height: 64pt;
}

.footer-img-box {
    text-align: center;
    padding: 16pt 24pt 8pt 24pt; /*After using space-between, it will align items better and you don't need this line, so you need to remove it.*/
}