Skip to content
OverviewSolutions
13
Comments
2
Kate
@YayoKB

All comments

  • Andrew•20
    @am4188Submitted over 2 years ago

    Any general tips for improvement would be really appreciated. This is my first project here and I know the code is a mess so I'm sure there's a lot of room to improve. Also, I started with the desktop version and then worked on the mobile (and was later told that it's best to do the desktop version first)-- when I started working on mobile, the button was the only part of the bottom div (.preview) that was out of the position with part of it outside of the container. I tried to fix it properly but couldn't figure out the root cause so I just added some negative margins on the left side. Any idea why it was leaking out of the container in the first place?

    Product Preview Card using HTML and CSS

    2
    Kate•170
    @YayoKBPosted over 2 years ago

    I've only glanced at this for a bit so forgive me if this isn't incredibly constructive or helpful. :)

    1. You're using fixed widths (pixels instead of rem / em or vh, vw etc). This decreases the levels of accessibility and responsiveness, too.
    2. I haven't come across using spans the way you did. Is there any reason you did so?
    3. For some reason, .preview does not follow the same widths as its parent. That is why your button has strange sizing - it's simply following .preview which is bigger than your .container. I could be wrong though - I'm just starting out on here too.
    Marked as helpful
    1
  • Kate•170
    @YayoKBPosted over 2 years ago
    • The site is not responsive. There are two layouts, one for desktop/wider screens and one for phones/taller screens. Your site does not change the layout depending upon the screen width. Please do that.
    • Some of your colours do not match exactly. The price and button should be a different green and the description and "PERFUME" label at the top should be in grey.
    Marked as helpful
    1