Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
3
philale
@Philale

All comments

  • Emmanuel Akwaboah•220
    @Cyrus-Akwaboah-Emmanuel
    Submitted almost 3 years ago

    Stats preview card component main

    1
    philale•350
    @Philale
    Posted almost 3 years ago

    Hello! Congratulations on completing the challenge! Even if it took days to complete, the result is very beautiful! It shows that you learned a lot in the process, because now you managed to do it!

    I just recognized two things you could improve:

    1. Use padding instead of margin on the .content div, because for adding some space around an elements content padding is used. Otherwise it could interfere with the box model. Margin is the outermost part of the box model, if you want to add a border later on for example, that would cause unwanted results.

    2. You used quite many flex container to position the card in the center of the screen. For these challenges you could just use absolute positioning, like so:

    .card{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50% -50%);
    }
    

    Then you don't need the display: flex property on the body and .container.

    By the way I love the hovering effect on the card, simple but very pretty! Keep up the work!

    Marked as helpful
  • Eddy Sea•90
    @EddySea69
    Submitted almost 3 years ago

    Single_Price_Gride_Component

    #bootstrap
    1
    philale•350
    @Philale
    Posted almost 3 years ago

    Hey, Congratulations on completing the challenge! It looks very good, with the higher border-radius even better than the design in my eyes.

    One thing you could improve is using the min() and max() css functions to implement responsiveness. Here is an example:

    Instead of writing:

    .box{
        width: 45%;       
    }
    
    @media screen and (max-width:575px){ 
        .box{
            width: 80%;                       
        }
    }
    

    You can use the min() function, like so:

    .box{
        width: min(750px, 80%);      
    }
    

    This just says that it will use the value, that is smaller. That means, if 80% of the screen width are smaller than 750px, the 80% will be used and vice versa. There will be a quite different behaviour than the one now visible, but it is also removing the "jump" from 45% to 80%.

    Try it out, it can really help and will clean up your css code!

    Marked as helpful
  • Tykhomyrov Oleksandr•110
    @alex1991tikhomirov
    Submitted almost 3 years ago

    HTML CSS SASS JavaScript

    #sass/scss#bem
    1
    philale•350
    @Philale
    Posted almost 3 years ago

    Hey,

    Congratulations on completing the challenge, looks pretty.

    Regarding your question why the image does not show up:

    Check out this question on SO, there is a informative answer!

    Try copying the svg element from the svg file into the url() function, like so:

    background-image: url("data:image/svg+xml,***<svg 
    xmlns="http://www.w3.org/2000/svg" width="146" height="145"><g fill="none" 
    fill-rule="evenodd" stroke="#CFD8EF"><circle cx="63" cy="82" r="62.5"/>
    <circle cx="105" cy="41" r="40.5"/></g></svg>***");
    

    I did not test it myself, but give it a try. You said it works on your laptop, so I don't know if that will solve the problem.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub