Skip to content
Submitted almost 5 years ago

mobile design

LukasMolnarSK•38
@LukasMolnarSK
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

So i tried it. :-D

Community feedback

  • Declan•300
    @declanslevinPosted almost 5 years ago

    Hi Lukas,

    Good job on your first submission :)

    The first thing I noticed on mobile is that your content gets cropped slightly by the edges of the screen.

    You can fix this in two steps: 1. By wrapping a 'container' div around your body content and adding some padding/margin to this container, which will give you some space either side of your content. You could also just apply the padding to <body> but this can introduce issues if you were to apply a background colour/gradient/image. It's considered good practise to use a separate div as a container instead.

    1. Then you will need to remove the 'fixed' width values on your card divs - you can use max-width instead of width and the card will adjust its width based on the amount of space available rather than push content off-screen.

    The content inside your divs could also use some padding as it currently reaches right to the edge.

    You should definitely have a go at making it responsive next by adding in styling for larger screens using media queries :)

    2

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