Skip to content
OverviewSolutions
18
Comments
438
Hyron
@hyrongennike

All comments

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Peteksi95,

    Congrats on completing the challenge

    If you want to center the card on the page. You can replace you main rule with the following.

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

    Hope this is helpful

    Marked as helpful
    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Grimjow-immortal,

    Congrats on completing the challenge

    You can center the card with flexbox, replace your body rule with the one below.

    body {
    background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful.

    Marked as helpful
    0
  • Mgamboa•220
    @Marianellag1Submitted about 2 years ago

    wanted to practice what I am learning in bootcamp. Am I in the right path for this project? I tried applying what I learned. Where I am learning, they encourage google searches, which I did. It's very hard for a beginner because there are so many solutions, and how I am being taught, not all of them are the same. It's a little confusing. I know that if I continue to practice, I'll start understanding this language. I feel as if I did good on it, but I want to re-confirm I'm going on the right path of understanding coding, as a beginner.

    Thank you.

    **I will continue doing more of these, it helps a lot and I am very happy when it looks almost as the product preview.

    Gabrielle Parfum HTML and CSS

    3
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Marianellag1,

    Nice job on the challenge

    If you want to center the card on the page, the margin-top: 12% on div inside the container div and replace your body rule with the following one.

    body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful
    1
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @joehaddad1000,

    Nice job on the challenge

    Just a few suggestion, you can replace your body rule with the following to center and space things out.

    body {
    background-color: var(--Violet);
    background-image: url("./images/bg-mobile.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 2.5rem;
    color: white;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main {
    flex-grow: 2;
    display: flex;
    align-items: center;
}

    Hope this is helpful.

    Marked as helpful
    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @barnilsarma,

    Congrats on completing the challenge

    If you want to center the card on the page, you can replace your body rule with the following one.

    body {
    background-color: hsl(216, 12%, 8%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 !important;
    font-family: 'Overpass', sans-serif;
}

    Also make the thank you card the same size as the rating card.

    Hope this is helpful

    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi,

    Congrats on completing the challenge

    To center the card on the page you can replace you body rule with the following one.

    body {
    min-height: 100vh;
    background: hsl(185, 41%, 84%);
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    Hope this is helpful

    1
  • asya•50
    @asya982Submitted about 2 years ago

    I have a question which was remained unsolved... I couldn`t figure out how to vertically align my elemnts (especially on phones)...If you can give me any tips how to do that, I's be very grateful! Thank you in advance

    QR-code-component-main using CSS grid

    1
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @asya982,

    Congrats on completing the challenge

    To center the card on the page you can replace your body rule with the one below.

    body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful
    0
  • King-Lemuel Alpha•20
    @Galahad-pySubmitted about 2 years ago

    Couldn't figure out how to change the icon color to white, tried using color, still didnt work.

    Also couldn't figure out how to add space in span.....error = >ofjules wyvern>

    Original files

    2
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Galahad-py,

    Congrats on completing the challenge

    You can replace your body rule with the one below to the center card on the page.

    body {
    background-color: hsl(217, 54%, 11%);
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: hsl(215, 51%, 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

    Because the overlay color is on the background on the div that surrounds the eye icon, the icon is underneath the overlay and you're also apply opacity to both the overlay and icon. You can use pseudo elements. before and after to create the overlay and add the eye icon. See my solution below.

    **my solution

    Hope this is helpful

    Marked as helpful
    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Andrusik1,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's "a" when you click submit without selecting a rating.

    Hope this is helpful

    1
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Nathanwalker28,

    Congrats on completing the challenge

    Seems there's a bug when selecting multiple ratings the submit button doesn't work. Only allow one button to be selected at a time.

    Hope this is helpful

    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Damilarr,

    Congrats on completing the challenge

    Instead of the browser alert box which is bad for user experience, I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked

    Hope this is helpful

    Marked as helpful
    0
  • Sunbear Day•80
    @SunbearDaySubmitted about 2 years ago

    I was confused by the colors provided to use in the project. I ended up using a different color for the page background. Not sure if this is an issue, but that's what I decided to do.

    I enjoyed putting this together. It was a lot of fun!

    Product review card using HTML, CSS and JavaScript

    1
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @SunbearDay,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's 0 when you click submit without selecting a rating which is not an option among the ratings.

    Hope this is helpful

    0