All comments

• 

  Steven• 50

  @StevenTheAnalyst

  Submitted about 2 years ago

  I wasn't sure how to make it so that the user could choose only one rating to submit. I tried using a radio input but that added a smaller circle to select and the number had a set distance that was off-center. Also, I wasn't sure how to show the rating that the user had clicked on the 'thank you' page. I tried using an event listener to save their choice as a variable to call later but I couldn't figure out how to do it so I left it as a static message always showing 4 out 5.

  

  Interactive rating component (HTML, CSS, JS)

  1

  40

  

  Melad• 220

  @melad99

  Posted about 2 years ago

  *FirstTo center the container in the middle of the page I used this for CSS in my solution and it works perfectly:

  .class-name{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%, -50%);

  }

  *For adding the same number I give each element and id and in the javascript when it clicked it shows the number with ID on the thank you page I think that will work with you.

  I hope that's will help you and that you did a great job and try with this challenge ...good luck with other challenges.

  0
• 

  Onwuemene Joshua• 10

  @onwuemenejoshua

  Submitted about 2 years ago

  1. Pls, what can I do to make the mobile view highly responsive, especially regarding the Image??
  2. pls, how do I position the container(Image and content(text)) in the middle of the page(desktop view)?
  3. pls, how can I make both the image and the content(text) to be of equal width?

  

  Responsive product card design using flexbox

  3

  30

  

  Melad• 220

  @melad99

  Posted about 2 years ago

  2-To center the container in the middle of the page I used this for CSS in my solution and it works perfectly:

  .class-name{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%, -50%);

  }

  3:for the image and text I split the container into left and right ..giving the photo width and also the texts div and like this you can contain both.

  I hope that's will help you and that you did a great job and try with this challenge ...good luck with other challenegs.

  Marked as helpful

  0
• 

  nikhil149• 50

  @nikhil149

  Submitted about 2 years ago

  Can some one help in fix any issues

  

  Product preview page using html and css

  2

  50

  

  Melad• 220

  @melad99

  Posted about 2 years ago

  First To center the page you can use this CSS properties for the main div for the card .class-name{

      position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%) ;
  

  }

  -then for the price, you should give it a color with CSS

  Also for the title, you can give it a width so it is like the design I hope that will help and I'm here for any questions

  Marked as helpful

  0
• 

  mei-e• 30

  @mei-e

  Submitted about 2 years ago

  Hello ! I have difficulty in wrapping the text as I resize the window. Any helpful solutions are appreciated !

  

  Product preview card component

  2

  50

  

  Melad• 220

  @melad99

  Posted about 2 years ago

  after giving width and height to the main <div> for the card you can give the text also a width so it will match the design.

  HTML:

  <h1 class="hh1">Gabrielle Essence Eau De Parfum </h1>

  STYLE:

  hh1{ width: 250px; line-height: 30px; font-family: 'Fraunces', serif; font-weight: 700; }

  I hope that I understand your problem and this will help

  Marked as helpful

  1

  This comment has received 2 repliesShow