Improve landing page responsiveness

[Eakam1007]

Resolves #496

Changes made

• Made DNS Records and Certificate cards get rendered using a flex-direction of column until the md (768px - Chakra UI default) breakpoint is reached. Essentially the cards will show vertically stacked instead of horizontally up to a bigger screen size than before. Thanks @Ririio for the suggestion
• Removed redundant Flex component for heading
• Updated the width of the heading to be 80% on sm (480px - Chakra UI default) breakpoint and up. The heading's width was too small compared to the cards.
• Added a width to the cards container so that they don't stretch to fit the page before the md breakpoint

Before and After Screenshots

2XL screen size (width >= 1536px)

Before

After

Extra Large screen size (width < 1536px)

Before

After

Large screen size (width < 1280px)

Before

After

Medium screen size (width < 992px)

Before

After

Small screen size (width < 768px)

Before and After

Extra small screen size (width < 480px) - no change

Before and After (no change)

Steps to Test

• Run app locally
• Navigate to landing page
• Open developer tools and using the toggle device emulation, adjust the width and height to check for responsiveness

[Ririio]

It seems that "small-screen" is always causing an issue-- looks too wide. I would recommend checking the breakpoint we have established, and change the values there. I was testing this out a couple of days back, and I get the feeling that small and xs are too small of a gap

[Eakam1007]

It seems that "small-screen" is always causing an issue-- looks too wide. I would recommend checking the breakpoint we have established, and change the values there. I was testing this out a couple of days back, and I get the feeling that small and xs are too small of a gap

Sorry what exactly do you want for the current small screen breakpoint? Make the medium cover more of it, and make the cards show horizontally instead?

[Ririio]

Sorry what exactly do you want for the current small screen breakpoint? Make the medium cover more of it, and make the cards show horizontally instead?

I like the idea of it being vertical. I just find the cards a bit too wide. If you checked the breakpoint file, the difference between sm and xs are just far too small compared to sm and md.

[Eakam1007]

Oh, I have defined the width of the cards manually for that breakpoint. I could just reduce it if you want?

[Ririio]

Oh, I have defined the width of the cards manually for that breakpoint. I could just reduce it if you want?

Sure, just a tiny bit smaller to make the card look not so fat

[Eakam1007]

How about this @Ririio:

[Eakam1007]

I have updated the original PR comment as well

[humphd]

Just tested this locally, and was about to Approve as well. Nice work, @Eakam1007.