DACCS-Climate / marble-website

https://marbleclimate.com
0 stars 1 forks source link

Fix node services title and cards #149

Closed alexandercyu closed 5 months ago

alexandercyu commented 5 months ago

Fixes #141 Fixes #142

alexandercyu commented 5 months ago

This changes the spacing of these cards when the screen width is > sm. Specifically, buttons are too close together:

image

Fixed the space between buttons for larger screen sizes.

mishaschwartz commented 5 months ago

@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

alexandercyu commented 5 months ago

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. Screenshot 2024-05-30 at 10 46 52 AM

Please check the gap between the Service heading, body and buttons, needs to be 10px gap on browser site. Screenshot 2024-05-30 at 10 53 18 AM

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.

alexandercyu commented 5 months ago

Grid is fixed, looks good Still don't see the 10px gap between body and buttons Screenshot 2024-05-30 at 11 34 54 AM

Screenshot 2024-05-30 at 11 46 01 AM (2)

Should be there now.

alexandercyu commented 5 months ago

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.