Skip to content
OverviewSolutions
14
Comments
4
Melad
@melad99

All comments

  • Steven•50
    @StevenTheAnalystSubmitted over 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
    Melad•220
    @melad99Posted over 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
    @onwuemenejoshuaSubmitted over 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
    Melad•220
    @melad99Posted over 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
  • Melad•220
    @melad99Posted over 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-eSubmitted over 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
    Melad•220
    @melad99Posted over 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