Skip to content
Submitted over 3 years ago

Simple Card using HTML, CSS

Saurabh Kumar•10
@saurabh25102000
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

Q1. I am having problem with image overflow. How to avoid it? Q2. In my code I've used separate container for text content, which is block element and contains block elements. How to deal in this type of situation when image is float: right; and text container left? Q3. Is there any good solution to align image right and text-content left? Q4. Should i use separate container for text-content or not? Q5. I have faced so many problem with image overflow inside of the "div.main-card", How to keep image always inside the container?

Community feedback

  • dewslyse•3,025
    @dewslysePosted over 3 years ago

    Hi saurabh25102000 👋

    Below are some suggestions that may address your challenges.

    Q1. Adding the property overflow: hidden; to your .main-card selector, should fix your overflow problem.

    Q2. You can use the flexbox layout module.

    Q3. Same answer as Q2. See the example below (flex properties added at the end)

    .main-card {
    width: 1200px;
    margin: 200px auto;
    border-radius: 10px;
    background-color: hsl(244, 38%, 16%);
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
}

    Addressing the preceding challenges solves the remaining ones.

    Hope this helps.

    Happy coding 💻

    0
  • Ritesh_Gupta•520
    @b4n1y4Posted over 3 years ago

    Bro I think you should check out my code for this challenge.. You'll certainly figure it out. You can also reach out to me on instagram @b4n1y4. Github repo for the challenge - https://github.com/b4n1y4/stats-preview-card-component-main

    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