Responsive product preview page using CSS

Community feedback

• 

  P

  Mike Frees•230

  @mikeFreesPosted over 1 year ago

  Hi! Your solution looks great. I am still learning myself but i tried to help you with your title.

  this seems to work. adding this to your css file .product-title { padding-left: 10%; text-align: left; }

  and i changed this in your HTML file

  <h1 class="product-title"> Gabrielle Essence Eau De Parfum</h1>

  it had 2 <br> elements in there that did not seem nesecary.

  Great work & Happy Coding!

  Marked as helpful

  0

  ---

  

  Elisabeth Erkekoglou•180

  @elic4vetPosted over 1 year ago

  @mikeFrees Hello Mike, thanks a lot for your prompt answer. I haven't thought at all about the padding ! Thanks for debugging me :)

  1
• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Elisabeth, good work! Just a few extra things:

  • Make sure to locally host your Google Fonts for privacy and performance. Here's a good tutorial from Kevin Powell about it: https://www.youtube.com/watch?v=zK-yy6C2Nck
  • I'd reduce the @media query width to something closer to 650px as the content can accommodate up until then
  • Avoid setting a height value to the body, as this can cause positioning issues (the content in the child containers should occupy their own space naturally), as well as a margin value, as this is causing overflow (noticed you had this set to hidden to hide this.)

  Hope this helps!

  0