Perfume responsive

Community feedback

• 

  Gaurav Pratap Singh•340

  @gauravsingh1281Posted about 2 years ago

  Hii Facundo , Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the cursor pointer property on the button element when a user hover the button there should be a cursor which make your website more interactive.

  The answer of your doubts are --

  A) for border-radius you have to give border radius to image like this

  for desktop design

  img {
      border-radius: 12px 0 0 12px;
  }
  

  for Mobile design

  img {
      border-radius: 12px 12px 0 0;
  }
  

  B) for text you have to give font-size in px and also give font-weight like this -

  for Heading

  h1 {
      font-family: 'Fraunces', serif;
      font-size: 32px;
      font-weight: 700;
  }
  

  For description

  .product, .desc, .style {
      font-family: 'Montserrat', sans-serif;
      color: var(--dark-grayish-blue);
      font-size: 18px;
      font-weight: 500;
  }
  

  For button to take full width of the container give 100% width and also give some padding like this

  button {
      width: 100%;
      font-size: 22px;
      padding: 15px;
  }
  

  C) for Centering the card use CSS display Property and give min-height 100vh like this -

  body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  You can also go through my solution-

  Marked as helpful

  2

  ---

  

  Facundo•40

  @1991facundoPosted about 2 years ago

  @gauravsingh1281 Thank you very much for taking the time for such a detailed explanation!

  1

  

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  @gauravsingh1281 @1991facundo

  One clarification to add: Never ever put font size in px. You should be using rem there, a responsive unit that scales properly on all devices no matter the operating system, browser or device settings

  2

  

  Facundo•40

  @1991facundoPosted about 2 years ago

  @grace-snow thank you Grace for the advise!

  0
• 

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  Hey @1991facundo, Congratulations on completing this challenge!

  Regarding your question:

  A. This should your border radius issue for the desktop image: .img-dsk{border-bottom-left-radius: 10px; border-top-left-radius: 10px; }

  B. I don't understand this question.

  C. To place the card in the center of the page do this:

  body { min-height: 100vh; align-items: center; display: flex; flex-direction: column; justify-content: center; }

  Keep doing a good job!

  img-dsk"

  Marked as helpful

  1

  ---

  

  Facundo•40

  @1991facundoPosted about 2 years ago

  @Deolabest

  Thanks for the clarifications.

  My second question was related to the font, in the example ive been sent looks different than my image and i dont know if its a font size problem or something else, because i thought to use a <br> but ive been reading that using that is not a good practice.

  0
• 

  Henrique Dummer•350

  @HenriqueDummerPosted about 2 years ago

  Hello facundo, how are you?

  I think i have a solution for your problem A.

  You can simply apply "overflor: hidden " in your container, this hides anything that cross the limits of the element you're applyng it to

  Marked as helpful

  0

  ---

  

  Facundo•40

  @1991facundoPosted about 2 years ago

  @HenriqueDummer

  Thank you very much for replying!

  0