[Bug]: Hero Image Not Responsive on Mobile

[shreyashrpawar]

Pull Request Template

Description

KROC leaderboard PR #18

The Hero image is aligning with other elements on mobile devices. So used the css queries to solve this issue.

Fixes #8

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Tested the change on the mobile device itself. So, the issue will be solved effectively.

Additional Context (Please include any Screenshots/gifs if relevant)

Visible page on mobile:

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes generate no new warnings
• I have checked my code and corrected any misspellings
• I have tagged the reviewers in a comment below incase my pull request is ready for a review

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in writers-program

[Swpn0neel]

LGTM! But it would be nice if you could share a short video by demonstrating that it's now fully responsive, using the developer tools!

[shreyashrpawar]

Here is the short video demonstrating that it's now fully responsive.

keploy.recording.mp4

@Swpn0neel Kindly check it now

[Swpn0neel]

Great! Kindly fix the DCO check:

• Ensure you have a local copy of your branch by checking out the pull request locally via command line.
• In your local branch, run: git rebase HEAD~3 --signoff
• Force push your changes to overwrite the branch: git push --force-with-lease origin main

[shreyashrpawar]

@Swpn0neel Thanks. Fixed the DCO check

[shreyashrpawar]

KROC leaderboard PR #18