Landing Page done, feedback anyone?

I’m at my wits end. The page looks fine in both Chrome and Firefox but when uploaded to codepen, submit button’s width is changed and I can’t figure out why. Help, anyone?

Sorry, here’s the link https://codepen.io/paramedas/pen/XooMWV

Very nice! Though I’m not exactly sure what’s wrong with it either. Does it look different on your mobile too?

1 Like

Thank you. I did the first version of form with flexbox but it didn’t behave the way I expected, so I tried this instead and I don’t really like how it looks and submit button doesn’t scale nicely. I’ll try again with flexbox, but there will be questions for more seasoned coders here, so check back again, please

1 Like

do you mean the email button?

Yes, it gave me a headache :roll_eyes:

Hi @paramedas - nice to see something a little different. Made me hungry :smiley:

Something to note is what happens when your media query kicks in. It leaves an enormous amount of blank space around the images, and small divs with even smaller text inside. Maybe think about enlarging the height of the divs and the contained text when the screen size is smaller than ‘x’ Px so you don’t have those acres of empty space on smaller screens/mobiles.

1 Like

Now, that’s flattering -I thank you, kind Sire :blush:
Not sure what you mean. Are you referring to the first two sections? I’m really struggling with finding breakpoints. I can’t find nice editor with a ruler or something to make it easier, since I hate Chrome’s responsive design tool.

So this image is a screenshot of your site at ~ 600px wide (I’ve just cropped it from Paint, so the dimensions aren’t spot on).

See how you get this big gap which looks quite prominent on mobile? My point is that if you made your.hero classes to take up more of the VW when viewing on smaller devices and you bumped up the text size, it would make viewing it that bit easier and the page would look less empty on vertical scroll.

Weirdly - and a bit contradictory, although it happens on larger screen sizes, it doesn’t bother me as much :smiley:

1 Like

Yes, I get it. It really looks bad on 600px. Thanks for letting me know. Can I milk you some more? Could you share some advice on mastering breakpoints and where and how could I actually see what I’m doing?

1 Like

I’m relatively new to coding, so I wouldn’t want to assume I knew anything that you didn’t - but this is a great summary of break points and best practice. Quite a long read, but something well worth mastering I think (something I also need to do!!)

1 Like

Thanks, man. Any help is more than welcome at this point (or any other point as well :laughing:). If I can return the favour just let me know.

1 Like

I think you did pretty good job overall, but from what strikes me instantly is bad readability of #product p, #season p elements.
While page looking fancy and nice is good thing, it should not come at the expense of actual usability and information presentation.
Last thing you want is for potential client to stop reading because it is hard to read or annoying.
In my opinion you overdid it with transparency, and I would change it to something like this:

#product p, #season p {
	background-image: linear-gradient(to right, rgba(216, 202, 187, 0.9), rgba(168, 143, 107, 0.9));

In other words, ramp opacity to 90%.
If user wants to see image they can already scroll the page to do that, and just a little of transparency is enough to get nice effect.
On the other hand, if user is annoyed by transparency making it harder to read, they will probably just leave your page without reading.
So yea, IMO don’t overdo it with transparent effects in areas where good readability matters.

1 Like

Spot on! I wasn’t sure about it either but when you look at the same layout over and over again you stop noticing little things. I like it better at 0.8 but big thanks for insight.

On mobile your images are totally blurry… it was impossible to see it was chocolate they were showing

Probably they are scaled up in the wrong way?

And too much white space, I had to scroll down two whole screens to be able to find the text. And the menu stop working after the first time

I’ve changed some things this morning, but my tooth is killing me, so I’ll check it later on. Thanks for the feedback. Perhaps you could look again in a day or two, if it’s not too much to ask.

1 Like

Ok, it’s done. I basically had to rewrite media queries while trying to learn and adopt mobile first approach. Hopefully, it’s fine now.