Here is my product landing page.
There are somethings looking weird when resizing and I don’t know what I’ve missed.
I have a line at the left that I couldn’t correct. Also don’t know how to add space between input fields (without using labels).
Any other feedback will also make me really happy. I’m here to learn so: bring it!
I think that left line is padding on body in smaller screen media query. It gives your content a little room on the sides but also pushes the header with it.
Your min-width and max-width on container seem to be working against each other so you end up with 100% wide page no matter what. I’m assuming you want a header all the way across but also want to control the width of the other content at different screen sizes. Separating header from container would help there - then style the container, not the body.
The input elements can have margin just like any other element so you could use that to put some space between those form elements.
The textbox is a bit larger than the other inputs because it comes with some padding supplied by the browser. box-sizing:border-box will make these all size similarly.
The video doesn’t size responsively at small screen. You might want to google that - there are some ways to control that but it is hard to explain.
I’m exploring everything you’ve mentioned. I’ll let you know as soon as I finish, so you can give me some feedback
Thank you!!
Ok, I could fix everything BUT the submit button. I think I forgot something and now when resizing it goes to an awkward position. I’m still trying to fix that.
You have 90% width on it so it gets kind of wide-ish.
The quick fix would be to put a <br> before the submit button and take the width off altogether. That would give a centered button that was only wide enough to contain “Submit”.
Also, when you use the navigation links the target of the link is buried under you nav-bar. Click on “About Us” to see what I mean. The heading About Us is under the nav-bar when you click that link.
This is probably the simplest solution that I’ve seen. You put padding-top and negative margin-top equal to the nav-bar height on all your anchor target elements.