Responsive design page Parfume Shopping

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Alexey, congratulations for your new solution!

  I saw that you've used margins to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  Here's is your code with the fixes and also the correct size for the component that is max-width: 900px

  body {
      min-height: 100vh;
      max-width: 1110px;
      margin: 0 auto;
      font-family: 'Montserrat', sans-serif;
      background-color: hsl(30, 38%, 92%);
      font-size: 14px;
      width: 375px;
      color: hsl(212, 21%, 14%);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Alexey Glazatov•20

  @AG1965RadioHeadPosted about 2 years ago

  @correlucas thank you a lot. I will check your recommendatios. I just started frontend dev, so every advice is precios

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @AG1965RadioHead We're hear for that, feel free to ask further questions.

  0

  

  Alexey Glazatov•20

  @AG1965RadioHeadPosted about 2 years ago

  @correlucas can you send me a link to your code. On the page you linked it's lead me to "dead end"

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @AG1965RadioHead https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  0
• 

  Abdullah•340

  @ASH2001princePosted about 2 years ago

  Hello Alexey Glazatov congratulations for your new solution! I have some tips for you if you dont mind

  1. Always the body selector should have a height value and as I saw in my projects I always used to put it min-height: 100vh; .
  2. All the elements should have a box-sizing: border-box; to prevent the default margin and padding .
  3. The body also should be aligned vertically you make it happen by doing this

  display: flex;
  justify-content: center;
  align-items: center;
  

  4. I also did this project a couple days ago and I received a feedback that helped me a lots you can open my profile to chick on it.

  ** I hope you find my feedback helpful .**

  Marked as helpful

  0

  ---

  

  Alexey Glazatov•20

  @AG1965RadioHeadPosted about 2 years ago

  @ASH2001prince thanx a lot for your comments. I just started my education so every advice is priceless

  1