Skip to content
Submitted almost 3 years ago

CSS grid, Mobile first design and Flexbox

accessibility
JO•60
@myspace8
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾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

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