Skip to content
OverviewSolutions
11
Comments
6
Ruan Esterhuyse
@RuanEsterhuyse

All comments

  • Ruan Esterhuyse•170
    @RuanEsterhuysePosted over 2 years ago

    Hi!

    Your solution looks good.

    Here is one suggestion on what you can add to your code to get the image purple.

    I hope it will be helpful. Happy coding!

    .main-span {
font-size: 3.5rem;
color: #ab5cdb;
}

.item-2 {
    display: flex;
    position: relative;
}

.item-2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: hsl(277, 88%, 33%);
    border-radius: 0 10px 10px 0;
}
    Marked as helpful
    1
  • Louise Norrsén•140
    @louisenorrsenSubmitted over 2 years ago

    Hi! I'm happy with the result and I learned new things!

    I want to know how I can use em and rem and not use px and still match the design. Does it matter if you don't want the component to change size?

    Thanks!

    Interactive rating component

    1
    Ruan Esterhuyse•170
    @RuanEsterhuysePosted over 2 years ago

    Hi Louise,

    Your solution looks great!

    I will try to answer your question if I understand it correctly. You can use rem and em units instead of px and still match the design without affecting any changes in the size of the elements.

    Rem is only relative to the HTML (root) default browser font size. The default font size is 16px. Em is relative to the font size of its parent element.

    So, 1rem is equal to 16px, 2rem is equal to 32px, 3rem is equal to 48px and so on. For example, if you want to change px to rem for a font size of 20px, it'll be 20/16=1.25rem.

    If you want to use em, divide it by the parent element's font size. If the parent element's font-size is 50px, then 1em = 50px. So, for 20px it will be 20/50 = 0.4em.

    You can also specify a font size on the HTML element, which would make it easier to do the calculations.

    For example, you can set the font size to 10px on the HTML element. That will change the entire layout because it automatically changes all the lengths defined anywhere with the rem unit. 1rem will no longer be 16 pixels. It will be 10 pixels. So, 20px will be 20/10 = 2rem. However, you should not set it to a fixed value like 10px because the root font size will always be 10px. That will create usability problems for users who increase or decrease the font size of their browsers. Therefore, it is better to set it to a percentage of the default font size. 10px divided by 16px = 62.5%.

    html { font-size: 62.5%; }

    Then, 10px is equal to 1rem, 20px is equal to 2rem and so on.

    Marked as helpful
    0
  • Ruan Esterhuyse•170
    @RuanEsterhuysePosted over 2 years ago

    Thank you, Pedro. I will add that.

    0
  • Ruan Esterhuyse•170
    @RuanEsterhuysePosted almost 3 years ago

    Thanks for the feedback! I appreciate it.

    0
  • Ruan Esterhuyse•170
    @RuanEsterhuysePosted almost 3 years ago

    Thanks for taking the time to give me such valuable feedback. I appreciate it.

    0
  • Ruan Esterhuyse•170
    @RuanEsterhuysePosted almost 3 years ago

    Thanks for the feedback! I fixed the accessibility issues. What can I do to get the exact positioning right?

    0