Skip to content
OverviewSolutions
23
Comments
5
Precious Aziken
@Azikenp

All comments

  • Precious Aziken•510
    @AzikenpPosted over 1 year ago

    Hi Samir. The background image didn't change because you used the same image for both mobile and desktop. I can see you used a mobile-first approach, the image on the body at the beginning of your code should have the path:(background-image: url(/images/bg-mobile.svg);)

    Try that and let's see if it works.

    Marked as helpful
    1
  • Maulana Sobari•50
    @Justlana13thSubmitted about 2 years ago

    this challenge is quite confusing for me. im unsure about the responsive design, but i think that's okay

    Single Price with Grid

    2
    Precious Aziken•510
    @AzikenpPosted about 2 years ago

    Hi @Justlana13th. You did really great on your design, everything looks nice but your card isn't really centered on your screen. You can achieve this effect using flexbox. Set body tag to ("display:flex;" , "align-items:center;" , "justify-content:center;" , "min-height:100vh;") and you should be good to go.

    Marked as helpful
    1
  • Precious Aziken•510
    @AzikenpPosted about 2 years ago

    Nice job there pal. I have a few suggestions too.

    • You should try centering the card on the screen, you can achieve this by using the flexbox. On the body tag, set the display property to flex, then "align-items : center;" and "justify-content:center;" and the card should be centered. -Also try styling for the mobile site too, i don't' think it's styled. -It is also advisable to use a mobile first approach when styling web pages.

    Great job still though. KUDOS!!!!

    Marked as helpful
    1
  • Precious Aziken•510
    @AzikenpPosted about 2 years ago

    Nice approach to the challenge here man. There may be a few issues with the mobile site though and this can be fixed using flex. Mobile first approach is always advised when styling in css.

    The overlaying purple color on the image is also missing. That effect can be gotten by placing an empty div in the HTML file just below the image and styling the div with background: purple ,setting the display to absolute, also give the div the same height and width as the image you want it to overlay then position it on the image using margin i think.

    Here is a link to my solution for better understanding:https://github.com/Azikenp/Stats_preview_card.git

    Marked as helpful
    0
  • Precious Aziken•510
    @AzikenpPosted about 2 years ago

    This is a very nice solution. I have a few points to add:

    1)When styling the card container, i think you should always give it a height to prevent it from just spilling out of the screen. 2) For the purple image overlay:

    • Place an empty div in the HTML file, just below the image you want it to overlay.
    • Then go to the CSS part and style the empty div giving it a color, width(same as the picture you want it to overlay), height(same as the picture you want it to overlay) and set it's position to absolute.

    Here is a link to my solution for better understanding: https://github.com/Azikenp/Stats_preview_card.git

    Marked as helpful
    1