Product Page dedicated to my favorite beverage...feedback welcomed

I think your page is Excellent!

Tanzanian Peaberry please! :+1:

YES, YES, Coffee! Awesome. :+1::star_struck::coffee::sunglasses::metal:

I like the color scheme of the page, Yes, it’s really cool.

Layout is responsive, well done! It’s working and functional, very good.

Placeholder for the text field, great!

It has also some small issues you could fix very easy, yes.

I think the top navigation bar is a little too much (too much height), specially for the mobile. I think smaller height could work better.

For mobile view(smaller screen) I see you set absolute 12px for the font-size, please don’t! Generally not overriding the global size with a absolute value is appreciated and recommended.

As expected, the manu link at top navigation bar falls down to next line when there is no enough space, check:
image

I suggest you go(now or later) with common known hamburger(patty) toggle-able menu like for mobile view.
It will help you to reduce the top navigation size to use more space for content, and also looks more pro!

As the image above, if you note, the line(border) after the top navigation bar is not started from screen edge(zero index), I suggest it could be started from zero.
I checked the code and realized the issue is about default body margin value browser applies. Simply apply 0 for both margin and padding for html and body tag could fix this issue very easy.

html,body{
padding:0;
margin:0;
}

The default margin values also causes horizontal scrolling sometimes just like you got too. This is happens when you ask an element goes 100% for example. browser calcule it as 100%+(left+right margin and padding) so makes some scroll.

I also noticed you used absolute units like pixel in your css rules. They would make issues for very high DPI screens for small values. Please use relative values over absolute units when possible.

The video you embed is very small! especially in mobile. Because you set the position as absolute and 50% width!?! why absolute pos?

Also the the shopping section (div id brew) limited using the width to 70%. it’s not good for mobile dear(could work for desktop), go for 100% when it’s mobile.

There is also more mess I got, and I believe you came up with them for fixing the video sizing, but easy to fix.
the div comes with wrapper class, I checked the rule, you applied height of 0?! and padding-bottom to 56.25%?! why? this is not good. let’s have a fix as following:

.brew .wrapper {
    margin-top: 1em;
    margin-bottom:1em;
}

The main issue is about the video(the iframe) in your page, the first issue is about the size of the vidoe which we assume we don’t know. so simple. get some hand of relative units. My suggestion:

.iframe_video{/*add the class to iframe tag*/
    width: 75vw; /*75% of view width, use more value for mobile, maybe 90vw*/
    height: 50vw; /*50% of view width, use more value for mobile, maybe 65vw*/
}

As I stated the color scheme looks very good, but the only very tiny issue is the non-sync colour for the link(anchors), by default the yare blue which is not good, and not-synced with your page.
Fix is simple, user a:link, a:visited, a:hover, and a:action css rules to control and override the default css for greta coffee page, example:

a:link{
color:#7a422e;
}
a:visited{/*when user previously visited the page, default is magenta color*/
color:gray
}

As you fit the main container to fit with 100% of body with, not for mobile you may add a little padding to make some space between text and screen edge. example:

.outer-wrapper {
    padding: 1em;
}

You may also bring more line-height for mobile view especially could be awesome.

About the contact box, I suggest you apply more space between elements. Same some padding for both submit button and text field could be awesome.

I believe you could make all these changes very easy and fast! liked your coffee page.

Keep going on great work, happy programming.

1 Like

Thank you @NULL_dev! I’ll come back and work on the suggested changes in a bit…I’m headed out for some cycling for now though…I need to enjoy this beautiful day!

Hi, I love your page!

Thank you @KoniKodes !

Thank you @sunshine53!