Skip to content
OverviewSolutions
5
Comments
2

Genie ๐Ÿงžโ€โ™‚๏ธ

@EugeneCarbadoLondon, UK100 points

Hi guys, I'm a self-taught Frontend developer originally from Birmingham, and now based in London. I love all things code and with this site, I'm aiming to up my game constantly. It's better to sweat in battle so you won't bleed in war ๐Ÿ˜Ž

Iโ€™m currently learning...

Typescript (Javascript) ๐Ÿชฉ State management ๐Ÿค– Animations ๐Ÿ‘พ Styled Components (Css) ๐Ÿคก Component Driven Design๐Ÿชข

Latest solutions

Latest comments

  • Genie ๐Ÿงžโ€โ™‚๏ธโ€ข100
    @EugeneCarbado

    Hi Leticia,

    I've had a look at your code and I'd like to offer some tips. Firstly I can see that as I expand my window your content box expands also. This is due to using vw to set the size. It would be better for you to find out the size of the content box, or even what you think the size should be then use px or rem values (1rem is equal to 16px. Or you can set it to what you like in the root). Using vw or vh can be tricky because as the user's window increases so will your element. In some cases, this could be useful, but for something like a product card this is something that should, in most cases, have a fixed height / width.

    You have used em values and this can be also tricky, as using em values will inherit the size of the div it is nested in. A better value to use is rem as it always refers to the value set in the root.

    I hope this feedback is useful.

    If you have any questions don't be afraid to reach out :)

  • Genie ๐Ÿงžโ€โ™‚๏ธโ€ข100
    @EugeneCarbado

    I would say you definitely need to set a fixed width and height for the container. That is why, looking at your preview site, the whole element keeps resizing. Setting the width and height with rem or px in mobile and then desktop would give the results you desire and stop it from resizing when you expand the window. Have a look at the design and see if you can figure out how much rem or px you will need :)

    Marked as helpful