Closed alexandercyu closed 5 months ago
This changes the spacing of these cards when the screen width is
> sm
. Specifically, buttons are too close together:
Fixed the space between buttons for larger screen sizes.
@alexandercyu Here's an example of how to implement this is a dynamic grid which might get us closer to the layout that we want: https://stackoverflow.com/a/74656166/5992438
On laptop browser, the services are divided in to 2 columns. Whereas, they need to be presented in 3X3 grid. Able to see that on desktop monitor(large screen) but since most of our user use a laptop to browse the site we should focus on creating 3X3 grid presentation for the services on Laptop browser as well.
Please check the gap between the Service heading, body and buttons, needs to be 10px gap on browser site.
Mobile version service cards looks good!
Adjusted the spacing so it will be three per row in laptop screens.
Changed space above buttons to be 10px.
Grid is fixed, looks good Still don't see the 10px gap between body and buttons
Should be there now.
The
p
element above the buttons has a bottom margin of 16px which is added to the 10px top margin from the buttons to increase the gap to 26px
Removed the default margin from the p tag.
Fixes #141 Fixes #142