Feeback for my product landing page

Code Feedback
1

hi guys kindly provide some constructive feedback for my product landing page
id also like to know a few things:

  1. how do i get the list in my footer to end at for example t & c’s then carry over and start a new li going down starting with shipping policies ( but parralel to the first list)
  2. when clicking “about” in the header it scrolls past what i actually set it to display upon which is the text above the video id=“about” the same applies for the “video” it scrolls little past the video more towards products
  • im aware that i need to correct aspects of responsiveness but for now as it stands id like to work on it before going on to adjustising the responsiveness

thanks very much!

1 Like
2

I would recommend you deal with this now before you work on anything else. Narrow your browser as far as it will go and style the page so it looks good. There should be no horizontal scroll bar unless absolutely necessary. You are not using any CSS break points right now, this will be your base/starting CSS.

After you are happy with the narrow screen, slowly widen your browser until you reach a point at which you feel you have enough room to rearrange things on the page for a wider view port. This will be your first CSS break point. You will use min-width for the break point and I would highly suggest you use ‘em’ instead of ‘px’ for the units. Once you find this first break point, add additional styling (inside the break point) for the wider screen.

This is generally referred to as a “mobile first” approach. Anytime you add elements to your page you should always start by narrowing the browser as far as you can and adding them to the base (narrow design) CSS. Then widen your browser to hit the first break point and style there. Depending on what you add you may find you have to add additional break points or change the value on existing ones. But always start narrow and work your way out.

1 Like