Skip to content
Submitted over 2 years ago

CSS grid, Mobile first design and Flexbox

JO•60
@myspace8
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is It A Best Practice To Use "gap" In CSS?

While working on the project, I realized "gap" doesn't work on iPhone 6. Most people still use it and it is always advisable to design something that will be accessible to all people.

The option I had was to use "@support". I tried but couldn't implement it well so I set a margin instead.

I encountered this when styling the button - "svg" and "Add to cart". And also the "pricing".

I'd really appreciate if someone show me how I can implement the "@support" in my code. Thank You.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Joe, congratulations for your solution!

    Yes, gap is an amazing property, but unfortunately doesn't have support in really old devices/browsers. I don't think this is something you should worry. But if you can use the padding-bottom approach to separate the elements that works really fine. Using padding bottom to between each element.

    If you like gap you should try row-gap and column-gap for a more specific control!

    Hope it helps and happy coding!

    Marked as helpful
    1

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