Hohner Harmonica Product Landing page (Feedback needed)

Code Feedback
1

Hi,

I have finished my product landing page by stumbling here and there. I am not confident enough that it went well, and would most likely need improvements, however I don’t have much know-how on what things I need to improve. Any pointers would be really appreciated.

The URL of the product landing page is this:

https://product-landing-fcc.netlify.app/

The source code of the above project is kept here for easier testing, and evaluation.

Thanks a lot for giving your precious time to look into this. I am very grateful.

2

It looks good overall but I think you could make it more accessible for people with less than perfect eyesight. Like maybe make the font a little bigger and collapse the row of three products into a single column on smaller screens, so that each product description takes up a little more space and is easier to read. That’s just my opinion. I could be wrong.

1 Like
3

The page is already responsive and the row collapses into a single column on small screen. Of which text font size are you particularity mentioning about? The descriptions of features or the headings of the page?

4

the pricing section. I think it would be better on mobile for each product in the product/price section to be stacked instead of side-by-side. Actually, now that I take my glasses off(I’m near-sighted) it seems a little more readable than before. It’s still a little uncomfortable for me though.

1 Like
5

As I said before the pricing section already collapses in column in smaller screens if you read the css code there are appropriate media screen queries which changes the flex direction from column to row. Also from what I get, you said its better to increase the font size in pricing section? Is that what were you trying to convey?

6

It’s rendering differently for me. On my android phone(chrome browser) the pricing divs are side by side. And using the responsive design view with firefox and chromiun developer tools on linux the divs are still side by side for every device.

1 Like
7

Okay, thanks, I will figure it out what’s the matter here.

8

The issue was I was missing:

<meta name="viewport" content="width=device-width, initial-scale=1">

It does needs a bit of more improvements in mobile layout though thanks.

9

Okay, I have fixed all the mobile layout, is it rendering as it was desired now?

10

Yes it’s rendering correctly. It’s now better on the eyes imo.

1 Like