Feature/cross browser compatibility

[Abhi-MS]

What kind of change does this PR introduce?

Standardisation on a width and justification

Issue Number:

Fixes #916

Did you add tests for your changes?

Snapshots/Videos:

1. Solved Refresh the docs.talawa.io website for 2025 #916 (comment)
   
2. Solved Refresh the docs.talawa.io website for 2025 #916 (comment)
   
3. Solved Refresh the docs.talawa.io website for 2025 #916 (comment)
   

Screen recordings showing responsiveness on various screen sizes,

1. Very wide screens >1800px

Screen.Recording.2025-01-08.235205.mp4

2. Wide screens > 1200px

Screen.Recording.2025-01-08.235319.mp4

3. Tablets

Screen.Recording.2025-01-08.235413.mp4

4. Mobile

Screen.Recording.2025-01-08.235558.mp4

If relevant, did you update the documentation?

Not relevant

Summary

Updated the card rows to have standard width and justification. 1280 px was set for the width of card rows for very wide screens.

Does this PR introduce a breaking change?

No

Other information

Updated other CSS for responsiveness

Have you read the contributing guide?

Yes

[github-actions]

Our Pull Request Approval Process

We have these basic policies to make the approval process smoother for our volunteer team.

Testing Your Code

Please make sure your code passes all tests and there are no merge conflicts.

The process helps maintain accurate and well-formatted documentation and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing.

Reviewers

When your PR has been assigned reviewers contact them to get your code reviewed and approved via:

1. comments in this PR or
2. our slack channel

Reviewing Your Code

Your reviewer(s) will have the following roles:

1. arbitrators of future discussions with other contributors about the validity of your changes
2. point of contact for evaluating the validity of your work
3. person who verifies matching issues by others that should be closed.
4. person who gives general guidance in fixing your tests

CONTRIBUTING.md

Read our CONTRIBUTING.md file. Most importantly:

1. PRs with issues not assigned to you will be closed by the reviewer
2. Fix the first comment in the PR so that each issue listed automatically closes

Other

1. 🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.

[rishav-jha-mech]

@Abhi-MS If you could attach a video from the inspector or add some text above the uploaded images, it would be helpful to understand how the UI looks at different widths

[Abhi-MS]

@Abhi-MS If you could attach a video from the inspector or add some text above the uploaded images, it would be helpful to understand how the UI looks at different widths

Hi, Thank you for the feedback. I will add a screen recording. Please note that this PR is related to the following comments on the issue: #916. Hope this gives some context while I prepare a screen recording.

Comments:
#916 (comment)
#916 (comment)
#916 (comment)
#916 (comment)
#916 (comment)
#916 (comment)

[Abhi-MS]

@Abhi-MS If you could attach a video from the inspector or add some text above the uploaded images, it would be helpful to understand how the UI looks at different widths

Hi, the PR should now have the videos and description just as you asked.

[palisadoes]

@rishav-jha-mech PTAL and merge if it looks OK