Skip to content
OverviewSolutions
19
Comments
3
Okemwa-mokaya
@Okemwa-mokaya

All comments

  • Okemwa-mokaya•350
    @Okemwa-mokayaPosted over 1 year ago

    I think for <q></q> adding line-height and increasing font size could help testimonial 5 cover the whole space

    Marked as helpful
    1
  • MarkitoOff•70
    @MarkitoOffSubmitted over 1 year ago

    Hello ! Here is my second challenge and I am very proud of the result despite the time spent and after doing some research. Now it is your turn to help me since I would like to have some feedback on the project. How can I improve? What good can I add to make the code more readable and consistent and make the site nice to see

    Challenge n°2: Product preview card

    2
    Okemwa-mokaya•350
    @Okemwa-mokayaPosted over 1 year ago

    For product-price since it is a crossed off price you are advised to use <del></del>,you can google to confirm. for product-category CSS does not advise to use capital letters through for PERFUME you could write in small letters in html then in CSS use text-transform and set to uppercase Hope this is helpful

    Marked as helpful
    0
  • 01JohnnyJohn•30
    @01JohnnyJohnSubmitted over 1 year ago

    The process was quiet linear. I've, first, set HTML structure. Then I've added all the basic CSS like variables for fonts, colors, background-colors, font-families etc, then matched CSS selectors with all the classes I've given while writing HTML

    I've been stuck for a while when trying to make the right side of the product card be spread (in height) within its container. I've also been stuck when trying to make both sides take 50% of the main container when screen width is more than 600px. The problem was that I've set max-width: 100% for image to fill its container, that's why it wouldn't scale when setting main container as a flex container. So, I had to overwrite it in media-query.

    Product Card

    1
    Okemwa-mokaya•350
    @Okemwa-mokayaPosted over 1 year ago

    to get a 50% width for both sides you can try using grid, on the container css you could write .container{ display: grid; grid-template-columns: 1fr 1fr; } it will display equal sizes on both sides That is for the desktop display Hope this is helpful

    Also for the crossed price you can use <del></del> element. It is highly suggested, you can google it to confirm.

    Marked as helpful
    0