Skip to content
OverviewSolutions
5
Comments
6
Olesia Kissa
@olesiakissa

All comments

  • Olesia Kissa•110
    @olesiakissa

    Hi @amandeep2603!

    It looks like the issue is caused by the align-items: center in your .card rule. I would suggest you to remove it or simply explicitly set it to stretch instead. This way you won't need to use height: auto on the image element.

    Hope this helps :) Good luck!

    Marked as helpful
  • Olesia Kissa•110
    @olesiakissa

    Greetings, @simon-baumhauer! The markup looks good, however the styling needs some fixes:

    • I would recommend you to check your body background property on both layouts because the color disappears once the viewport is > 375px and also the background url seems to look for the svg pattern file that's not in your project folder. You should update your repository with the corresponding images and I think it should work fine.
    • Your annual plan container background color isn't the one specified in the style guide, make sure to check out the codes for the color.

    Good luck on your next proejcts :)

    P.S. check out the title tag in your html file, if you leave it as empty it may cause issues during validations.

  • Olesia Kissa•110
    @olesiakissa

    Hey @amakaogujiofor :)

    This looks great! I would recommend you to edit padding on your paragraphs from just regular 0.7em to 0.7em 0 -> this will fix the paragraph shift that happens on the desktop version and it is meant to save the visual hierarchy of the whole design. And I would also align h2 in your details section with texts below. (text-align: left)

    I hope this helps!

    Marked as helpful
  • Olesia Kissa•110
    @olesiakissa

    Hi @PhanHuuLan! I would like to recommend you some things :)

    1. Your image doesn't show up because of the invalid url, try updating the link by removing / in the beginning to make it look like /images/image-header-desktop.jpg (this will fix the path) (you can also check out more information on relative links)
    2. You should add some margins/max-width to the card's wrapper. And although the rest of the markup looks good, the overall look can become stretchy because wrapper takes up all the space
    3. Content's margin-bottom seems to be too large, try changing it to smaller value (2em seems just fine)

    Hope this helps!

  • Olesia Kissa•110
    @olesiakissa

    Hi @d4lbit! At this point you have set your card width as max-width: 345px; so it's going to stay no more than that width at all screen sizes because the value is hardcoded in px. If you would like to make the card shrink on smaller screens, you should try writing a media query for the screen size of 375px for instance and set card's width like 90% of the screen (or whichever size you want it to be). Hope this helps :)

    P.S. I would also suggest you to change your container to 'div' (you have written it as <container class=container>) because it causes an issue in HTML validations.

  • Olesia Kissa•110
    @olesiakissa

    You did a great job on this challenge! It's interesting how you use scale() to change the size of the objects instead of making them fit small containers with the predefined size. One thing I would recommend in general is choosing more meaningful class names in the main content section. Maybe you should try something like ''content-area/authorship-area" instead of "second/third" because it makes the process of reading code easier. Good luck :)