Skip to content
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 tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @ruona88Posted 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.

    1
    Saurabh Mishra•80
    @Saurabh-Mishra04Posted 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.

    0

Please log in to post a comment

Log in with GitHub

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