Please give feedback on Dog Shoes :D Product Landing Page

Code Feedback
1

Hey Guys,

I have finished my Product landing page and please give me your feedback. And, the logo? I tried a lot but why can’t I make it in center? Any suggestions please.

Thanks very much in advance :smiley:

2

The page layout and concept is great. But there are a few improvements that I would suggest:

  1. To center the logo add the following code snippet to your css.
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

This will center most of the elements on your page, but the navbar will be moved to the right by a lot. To correct this, just add ‘left: 0;’ to your ‘#navbar’ css code. Appropriate changes will have to be made in the media queries to adjust for this change. You might also have to add a bit of top margin to the footer.

  1. Add a placeholder value like ‘Enter your comment here…’ for the textarea element as it looks a bit empty in its current state.

  2. There is a mismatch in the base line of the images in the product section. I am assuming it was unintentional.

    image
    image1202×188 90.6 KB

    Also the center image expands disproportionately to one side on hover leaving unequal whitespace on the right side.
    image

Hope this helps you.

1 Like
3

Hey,

Thank you very much for your feedback.

I will try the code you have suggested.

Also, the pictures, actually they are all different sizez and I thought that’s why tehy weren’t looking same.

Is teher a way? Which I don’t understand I can make tehm look in the same size?

Thank you very much. :slight_smile:

1 Like
4

To make all the pictures the same sizes, you’ll have to use absolute units to define their width and height and adjust these parameters in media queries.

.product-detail {
  width: 30%;
  height: 400px;
}

Another way around this is to change the ‘.product-container .container’ css from flex to a grid with three columns and a row, so that each image occupies all the area in a single cell without extending beyond it.

1 Like