fix:Website responsive for small device (footer issue solved)

[PushpakRaut]

Previously the Gmail ID was out of the container in the iPhone 5 screen (320px width), Now this issue is resolved

Fixes #721

This PR fixes the following issues:

• first, the gmail is now on the screen when the device is small. ex: iPhone 5 (320 px width)

closes #721

Changes proposed

I have changed the CSS class of the div that is binding the content, In that I have removed gap-4 which means it is a gap between the grid from both row and column. so, I have changed it to gap-y-4, gap-x-0 default which makes row gap as 1rem and column gap 0. Also I have added a CSS class as "sm:gap-x-4" which means whenever the screen width is minimum 640px then the column gap will also become the 1 rem.

You can check the screenshots below.

Check List (Check all the boxes which are applicable)

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Add all the screenshots that support your changes

Summary by CodeRabbit

---

• Style: Adjusted the grid gaps in the Footer component for better responsiveness on different screen sizes. The changes ensure that the layout remains consistent and visually appealing across various devices, enhancing the user experience.

[coderabbitai]

CodeRabbit

Walkthrough

The proposed change refines the responsive design of the Footer component in our application. It adjusts the grid gaps between columns and rows for different screen sizes, ensuring a more consistent and visually pleasing user experience across various devices.

Changes

File	Summary
src/components/layout/Footer.jsx	The Footer component's grid gap classes have been updated to provide better responsiveness. The gap-4 class has been replaced with gap-x-0 gap-y-4, and sm:gap-x-4 has been added to the inner div element.

🐇💻

In the land of code, where the brackets lie,
A rabbit hopped, tweaking UI on the fly.
With a twitch of his nose, and a quick key tap,
He adjusted the gaps, no more layout mishap!
Now the footer dances, on screens big and small,
Celebrate the changes, CodeRabbit conquers all! 🎉🥕

[github-actions]

Woah! This is your first Pull Request in our community, Congratulations 🎉 and thank you for your contribution! 🚀 The team will review it on availability 💫. In the meantime join our Discord server and checkout our YouTube channel.

[coderabbitai]

CodeRabbit

Actionable comments generated: 0

Commits

Files that changed from the base of the PR and between 9e7265c and c965552 commits.

Files selected for processing (1)

• src/components/layout/Footer.jsx (1 hunks)

Files skipped from review due to trivial changes (1)

• src/components/layout/Footer.jsx

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Tag the bot with @coderabbitai in any review comment to ask it questions. The bot will not respond unless explicitly tagged.
• A review comment is a comment on a diff or a file and not a comment on the PR itself.
• You can use the mouse to select multiple lines of code to provide exact context to the bot.

Code suggestions

• The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
• You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

• Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

[Chandraprakash-Darji]

@PushpakRaut share the screenshot for before and after

[PushpakRaut]

Hey @Chandraprakash-Darji

before:

after:

here are the images you asked for.

[Chandraprakash-Darji]

LGTM 🔥