Skip to content
OverviewSolutions
7
Comments
3
Carlo Autor
@A14313

All comments

  • Ahmed Hany•220
    @ahmedhanyhSubmitted about 2 years ago

    I couldn't position the background images as they are positioned in the FEM design, how can I achieve this?

    And what do you think could be improved in general?

    TIA.

    Profile card component

    2
    Carlo Autor•160
    @A14313Posted about 2 years ago

    Make the SVGs position: absolute. Make the parent of blobs to be position relative and you can control the blobs

    Make this your markup structure.

    <body> <main> .blob1 .blob2 <div class="card"> Your code here </div> </main> </body>

    Here is my solution: https://www.frontendmentor.io/solutions/responsive-card-mobilefirst-workflow-941q1kZ3Wa

    Dont forget to mark this as helpful :)

    Marked as helpful
    1
  • Carlo Autor•160
    @A14313Posted over 2 years ago

    Good Job! But there are a few things I want to mention. The image is smooshed when resizing the window. Try to resize to 1000px, you'll see that the image is so smooshed. Try adding some breakpoints it will solve the problem.

    Also, I noticed that when you reached 600px the image will go down. It is okay but the image itself has a border-radius. To fix that problem, remove the border-radius to the image and add the border radius to the card itself and add overflow:hidden to the card itself. It will fix the problem.

    Lastly, it is recommended that you follow the design rules like font, spacing, etc.

    You can check out my solution and try resizing it from the smallest 375px up to the biggest possible, Try noticing the image. You can check also my code to see what I mean by media queries. I hope that this helps you.

    My solution: https://www.frontendmentor.io/solutions/mobilefirst-solution-using-css-grid-and-flexbox-9ktU1M_TTC

    Please give me feedback also in my solution. Don't forget to mark this as Helpful Thank you

    Marked as helpful
    0
  • Carlo Autor•160
    @A14313Posted over 2 years ago

    The image is smooshed when resizing the window. Try to resize to 800px, you'll see that the image is so smooshed. Try adding some breakpoints it will solve the problem.

    Also, I noticed that you are using the desktop version of the picture all the time, you can switch it to the mobile and desktop version using media queries.

    You can check out my solution and try resizing it from the smallest 375px up to the biggest possible. You can check also my code to see what I mean in media queries. I hope that this helps you.

    My solution: https://www.frontendmentor.io/solutions/mobilefirst-solution-using-css-grid-and-flexbox-9ktU1M_TTC

    Please give me a feedback also in my solution. Thank you

    0