Product-landing-page feedback

hy! I would like to get some feedback on things I could improve on my product landing page: https://codepen.io/paodimelaun/full/zYxzbEx

Great design and overall great look for the page. Great background, Great vibes and really gives an overall techno feel. The responsiveness of the page is great too! Just a few suggestions I have:

Your page would look a little better if you spaced your words just a tad bit more.

The input placeholder blends in a bit too much with the page, so you may want to brighten it up a bit.

Overall great project!

1 Like

Hi and welcome to the forum! :slight_smile:

Your page looks good. I can see that you have a clear theme and youā€™ve managed to pull it off (although Iā€™m not that into this green color for the text, it seems too bright so itā€™s not the most comfortable reading experience for me, but this might as well be just personal preference and in any case, I realize that itā€™s a part of the whole ā€˜digitalā€™ vibe that you have going on, so I donā€™t know, it might not be too bad :sweat_smile:).

A bigger problem Iā€™ve noticed has to do with responsiveness. So, here are a couple of screenshots at 400px:

(Here you can see that your navigation menu covers a portion of the heading. Try to fix this by increasing the margin on the heading for example.)

(And here, you can see that the ā€˜Sendā€™ button is way too narrow to even fit the entire text, and the black main element is too wide for the screen so you get this side scroll bar, which is almost never a good idea)

Other than this, great job! :smiley:

I hope I managed to help a bit, and good luck going forward! :blush:

1 Like

hy SageM-19, i took your suggestions into consideration along with kristinaā€™s and made some changes to the page, thanks for the feedback!

2 Likes

hy kristina_v! i changed some of the values to vw instead of em and rem to solve the scalling problem, as of the button scalling, the only thing that seemed to work for me was setting its properties to fixed values(px), all others options(%,vw) seemed to work just like the screenshot you sent me. Also, thanks for the feedback!

Alright, so I see that youā€™ve fixed the scaling of the main element, so now you donā€™t have the side scroll which is great! But the problem with using vw for font-size is that the text gets way too small on smaller screens so that itā€™s basically unreadable on less than 600px. Iā€™d suggest using em for this property. I mean, you can even use pixels, but then it might be a good idea to adjust the text size with media queries. This is also how you might solve the ā€˜Sendā€™ button issue - make the text smaller on smaller devices and you can also experiment with min-width property to prevent the button from getting smaller that the text it contains. :slight_smile:

1 Like

Itā€™s even easier to read now (makes alot of difference). This page has seriously impressed me and it has also inspired me in terms of what my page would look like. Iā€™m not sure how much my words helped you, but your page has certainly helped me! Thank you very much.

1 Like

I think itā€™s brilliant in every way. The colors are especially brilliant. I didnā€™t even look at the coding, just appreciated the magic. My only question is about the grammar on the contacts page. "Wants a custom order? It should be ā€œwant a custom orderā€ unless this is gaming grammar or something I have no idea about.

Other than that itā€™s intimidatingly well done.

Thank you.

1 Like

hy bonheur, english is not my native language so I still make some mistakes like that, thanks for ponting that out! Also iā€™m glad you liked it :smiley:

1 Like

I am humbled. Huge accomplishment!

1 Like