Skip to content
Submitted over 3 years ago

Preview Card using HTML and CSS

Ajay Vignesh J•20
@AjayVignesh08
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

1)What is the correct method while designing in mobile view??? 2) At some point the responsiveness of the page is not so good and how to rectify this?

Community feedback

  • ShohagB.•195
    @devindivPosted over 3 years ago

    First of all you should remove the position: absolute from .container div, put all the text within one div and the image in another then apply flex on .container, Then within the text div make two divs, one for main heading and p, another for bottom part, then style it accordingly. As for mobile responsiveness, bring both the images(desktop and mobile) in html and change their visibility in css with visibility property and media query. Also maybe play around with the max-width property of .container.

    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