fix: hero section image grid

[Sanchitbajaj02]

Related Issue

As mentioned in issue #1032, the home page image grid is not looking good on mobile screens. The issue I detected is related to the max-width issue and excessive use of absolute properties.

Description

To solve this issue, I first tried to remove all the dependencies related to absolute classes and use a grid to make 2 columns and align the content in them but to remove the existing code and rewrite it for all different screen sizes was kind of a hassle and disrespect to all the contributors who worked hard to create that section.
So, to fix that, I optimize the existing absolute classes for different screen sizes and gave a global max width class to set the content's max width.

Screenshots

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
projectshut	✅ Ready (Inspect)	Visit Preview	Jun 5, 2023 6:24pm

[github-actions]

Great job, @Sanchitbajaj02! 🎉 Thank you for submitting your first pull request. Your contribution is valuable and we appreciate your efforts to improve our project.

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

[priyankarpal]

also, please check the right side images problem

[Sanchitbajaj02]

also, please check the right side images problem

can you tell on which screen size, does this issue occurred?

[priyankarpal]

also, please check the right side images problem

can you tell on which screen size, does this issue occurred?

1920 x 1080

[priyankarpal]

also, please check the right side images problem

can you tell on which screen size, does this issue occurred?

1920 x 1080

still same problem

[Sanchitbajaj02]

I have reverted back the max-width part. Can we come on call if this still gives the same issue?

To reproduce this:-

I reduced the max-width manually. I couldn't get this same issue on the screens I have tested

[priyankarpal]

I have reverted back the max-width part. Can we come on call if this still gives the same issue?

To reproduce this:-

I reduced the max-width manually. I couldn't get this same issue on the screens I have tested

yeah

[Sanchitbajaj02]

I have reverted back the max-width part. Can we come on call if this still gives the same issue?
To reproduce this:-

I reduced the max-width manually. I couldn't get this same issue on the screens I have tested

yeah

issue still occurring?

[priyankarpal]

I have reverted back the max-width part. Can we come on call if this still gives the same issue?
To reproduce this:-

I reduced the max-width manually. I couldn't get this same issue on the screens I have tested

yeah

issue still occurring?

nope but mobile view

I have reverted back the max-width part. Can we come on call if this still gives the same issue?
To reproduce this:-

I reduced the max-width manually. I couldn't get this same issue on the screens I have tested

yeah

issue still occurring?

Mobile view

Desktop view

[priyankarpal]

Have you reverted the changes? @Sanchitbajaj02

[Sanchitbajaj02]

Have you reverted the changes? @Sanchitbajaj02

I reverted the max-width problem that was occurring. I fix the card grid for 350 screen size and above