Skip to content
OverviewSolutions
18
Comments
438
Hyron
@hyrongennike

All comments

  • Hyron•5,870
    @hyrongennikePosted over 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 over 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
  • Hyron•5,870
    @hyrongennikePosted over 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 over 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 over 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 over 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
  • Hyron•5,870
    @hyrongennikePosted over 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
  • Hyron•5,870
    @hyrongennikePosted over 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 over 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 over 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 over 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
  • Hyron•5,870
    @hyrongennikePosted over 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
  • Hyron•5,870
    @hyrongennikePosted over 2 years ago

    Hi @siavhnz,

    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 empty when you click submit without selecting a rating.

    Hope this is helpful

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

    You can also use sessionStorage or use a query string basically sending the variable through the link when the submit button is clicked.

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

    Hi @TedJenkler,

    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 # when you click submit without selecting a rating.

    Hope this is helpful

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

    Hi @aymantarek16,

    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 empty when you click submit without selecting a rating.

    Hope this is helpful

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

    Hi @sumaiyakawsar

    Nice job on the challenge

    Instead of setting height: 65vh on body .container .card-container .card you can remove that and add the following rule.

    .card__top {
    margin-bottom: 5rem;
}

    this way the height is more consistent across different screens.

    Hope this is helpful

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

    Hi @bukeme,

    Nice job on the challenge

    Instead of using margin to try center the card you can replace your main rule with the following.

    main {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful
    0