Submitted over 3 years ago

Responsive site using css, background-blend of images and flexbox

Saurabh Mishra• 80

@Saurabh-Mishra04

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first challenge from Front-End Mentor .The problem I faced while coding this website was, I couldn't quite figure out how to set the right color for my image but i eventually got it :). Another problem is that when I open the Live URL in my mobile it doesn't show the result I want the image and the content gets over-layed, but when I view the same URL in responsive design for mobile at (375x975 pixels) which is written in the style guide, it shows exact result I wanted. Any suggestions on how to improve that and my code will be much appreciated.

Thank You! :-)

Community feedback

Ejovi Okiekpakpo• 345

@ruona88

Posted over 3 years ago

Hello MISHRA,

I think you should reduce the width of the container for the COMPANY, TEMPLATE and QUERIES section. Its wide compared to the design specs.

I also checked for the responsiveness, I noticed that your work starts to breaks when it's width is adjusted to about 1400px and below.

Great work with the opacity and color of the image though, I couldn't do it.

Saurabh Mishra• 80

@Saurabh-Mishra04

Posted over 3 years ago

@ruona88 Thanks for your comment. Yes even I noticed some of the problems you mentioned. I tried to reduce the width of the container mentioned but couldn't as I was trying to reduce the margins, but I didn't try the width property so will try that method too. About the responsiveness I have mentioned it in my "Questions for community". It does break but when I view it in responsive design at 375px it shows the result I wanted. Can you review (https://github.com/Saurabh-Mishra04/stats-preview-card-component) too. Anyway thanks a lot for your support.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord