Laazabi Samir• 60
@lazzsam
Submitted
My background image didn't charge i don't know why, any advices are welcome!
Precious Aziken
@Azikenp
All comments
- Precious Aziken• 510
@Azikenp
Posted
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
@Justlana13th
Submitted
this challenge is quite confusing for me. im unsure about the responsive design, but i think that's okay
Precious Aziken• 510@Azikenp
Posted
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 - Leonardo• 250
@Leonardclc
Submitted
Precious Aziken• 510@Azikenp
Posted
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 - namlid• 70
@NamlidN
Submitted
Precious Aziken• 510@Azikenp
Posted
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 - Wadie Ben• 200
@WadieBenabdouh
Submitted
Thanks for the challenge, looking forward to feedback!
Precious Aziken• 510@Azikenp
Posted
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
