Skip to content
OverviewSolutions
10
Comments
20
Abhijit Shankhdhar
@im-abhijit

All comments

  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @justToPractice , congrats on completing this challenge you have done a great job

    you have to that card responsive so that on screens with less width it should look good you have used flex box so what you can do is at a certain width height you can change flex-direction to column from row

    or second and best thing you can do is design for mobile first , then later you can customize things for broader screens

    @media screen and (min-width: 800px) { body { display : flex; flex-direction:row; } }

    you can add this to css , and by default make flex-direction: column what above code will do is after width is 800 px it will change flex-direction to row , else it will be column by default

    Marked as helpful
    0
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @Aphasia18, congratulations on completing this challenge , you have done a good job

    please do use min-height for your wrapper element else your content will get cropped

    test your code on height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    0
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @Adrgon, congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    Marked as helpful
    0
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @explorem, congratulations on completing this challenge and you did a fantastic job

    at the end of the card in the creator name "Creation of Jules Wyvern". there should be hover effect on "Jules Wyvern" also , the color of this text should change to cyan on hovering

    rest all looks good

    Marked as helpful
    1
  • Agnar•220
    @agnar-nomadSubmitted about 2 years ago

    This was a neat project to practice layout and responsive design, flex properties.

    I would appreciate a little help with the images because I was not able to produce that exact same purple colour cover over them.

    Second, I did a little experiment with font sizes, to make them responsive. It's not great, but it helps me set myself on a path to build better and think differently.

    Stats Preview Card Component solution

    1
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @agnar-nomad , congrats on completing this challenge

    to achieve same purple color over image use it like this

    .image-div::after { content: ""; position: absolute; inset: 0; background-color: hsl(277, 64%, 61%); mix-blend-mode: multiply; opacity: 0.8; border-radius: 1rem 1rem 0 0; }

    mix-blend-mode: multiply will help in better blending with the background

    Marked as helpful
    1
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @Xermelly, congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on height 500px and less you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    Marked as helpful
    0
  • Enrica•170
    @ErriGarciaSubmitted about 2 years ago

    Hi there! Please leave a comment below if you have any suggestions! Thank you so much!

    CSS Display Flex

    2
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @ErriGarcia, congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    0
  • Hirak•160
    @hkalita20Submitted about 2 years ago

    I would be grateful if you point out my mistakes.... Your feedback may help me out hence all feedback are welcome.../

    Hirak's landing page

    2
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @hkalita20 , congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on width 300px and height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    0
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @AyushKeshwan , congratulations on completing this challenge , you have done a good job

    please do use min-height for your container element else your content will get cropped

    test your code on width 300px and height 400px you will see your image is getting cropped

    you can check my solution to get an idea

    https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

    Marked as helpful
    0
  • Atul kumar•200
    @AtulKumar0001Submitted about 2 years ago

    Why is my card tilted to the left after 560 pixels? Any advice would be greatly appreciated.

    Basic Css with flexbox

    1
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @AtulKumar0001 , congratulations on completing this

    it quite to understand things from your css , but you can easily center your card with flex box using justify-content and align-items property .

    below is an example for that

    https://jsfiddle.net/yorhtq1e/2/

    0
  • Muralidhara Bhat KS•90
    @SlenderShieldSubmitted about 2 years ago
    What are you most proud of, and what would you do differently next time?

    First Project in Frontend Mentor

    What challenges did you encounter, and how did you overcome them?

    CSS was tricky

    What specific areas of your project would you like help with?

    NA

    Responsive Page built using HTML, CSS

    2
    Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @SlenderShield , congratulations on completing this challenge and you did a great job

    its okay if our page is not looking like the exact solution but try to be as close to exact solution as possible , because challenges are designed in a way that you will learn new things with them

    you can set a min-height to your card as if you will test your code on a screen having height < 500 px , your image is getting cropped out you can have a look at my solution

    https://www.frontendmentor.io/solutions/qr-code-component-design-using-tailwind-and-flex-_iNIc3mlyH

    Marked as helpful
    1
  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @shreyaswani congrats on completing this one and indeed you did a great job

    you can give a little margin to the "ADD TO CART " button so that it looks elegant and close to the expected design also please try to make your web page responsive , you can use media queries and flex box for it , that is the easiest way

    have a look at my solutions you will get some help

    https://github.com/im-abhijit

    Marked as helpful
    0