docs: fix styling for buttons on mobile

[dalenguyen]

References

• Closes [DOCS] fix buttons styling on mobile #38

New Behaviour

[dalenguyen]

@brandonroberts @LayZeeDK I'm utilizing margin-bottom--md (1rem) from infima & flex-wrap to push the button down on mobile devices. Please let me know if this approach works.

[LayZeeDK]

Good solution, @dalenguyen.

I wonder how it looks if we make those CTA button links full width on small screens 🤔

[dalenguyen]

@LayZeeDK I can target the a tag on smaller screens and make the button full with this

@media screen and (max-width: 562px) { 
  .buttons a {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

Then on a smaller screen, it will look like this

[LayZeeDK]

Infima/Docusaurus uses a breakpoint, I believe it is 996px width.

[LayZeeDK]

Visually it looks great though!

[brandonroberts]

I like the full width buttons also!

[dalenguyen]

@LayZeeDK I saw that they implement 576px & 996px as breakpoints on their styling. Using 576px makes more sense since having full with buttons on top of each other at 996px is a bit much. What do you think?

[LayZeeDK]

Makes sense!

[LayZeeDK]

Add the full width style to the home page and we're good to go in my opinion 😊

[dalenguyen]

Cool. Just applied full width to buttons on mobile :D

[LayZeeDK]

praise: Great solution!

[LayZeeDK]

issue: Use the Infima spacing variable instead of hard-coding 1rem.

Suggested change

	gap: 1rem;
	gap: var(--ifm-global-spacing);

[dalenguyen]

Thanks, great catch :D

[brandonroberts]

LGTM

[brandonroberts]

Thanks Dale! @allcontributors Please add @dalenguyen for css

[allcontributors]

@brandonroberts

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.

[brandonroberts]

Ok lol. @allcontributors Please add @dalenguyen for design

[allcontributors]

@brandonroberts

I've put up a pull request to add @dalenguyen! 🎉