Feature Request

[Yaddalapalli-Charan-Kumar-Naidu]

🐛 UI/UX Improvement: Responsive Layout and Icon Alignment Fixes

Description

This issue focuses on two key improvements:

1. Responsive Layout Fix – The content does not adjust properly for smaller screen sizes (as seen in the first screenshot). The layout should be optimized for better responsiveness.
2. GitHub & YouTube Icon Alignment & Size – The icons in the sidebar menu appear too small and are misaligned. They should be adjusted for better spacing and visibility (as seen in the second screenshot).

Screenshots

📱 Responsive Issue

Current behavior on mobile view:

🎨 Icon Alignment Issue

Current sidebar menu with misaligned icons:

Expected Behavior

• The layout should be fully responsive, ensuring proper text alignment and content scaling on different screen sizes.
• The GitHub and YouTube icons should be:
  • Properly aligned with other menu items.
  • Increased in size for better visibility.
  • Given sufficient spacing to avoid a cluttered appearance.

Steps to Reproduce

1. Open the application on a mobile device or use developer tools to simulate a smaller screen.
2. Observe the content layout and responsiveness issues.
3. Open the sidebar menu and check the alignment and size of the GitHub and YouTube icons.

Suggested Fixes

• Use CSS Flexbox/Grid to ensure proper content scaling.
• Adjust font-size, padding, and margin for the icons.
• Implement media queries to handle different screen sizes effectively.

Environment

• Device: Mobile (Samsung Galaxy S8+ simulation)
• Browser: Chrome
• Screen Size: 360 x 740

Additional Context

This improvement will enhance the user experience by making the UI more consistent and visually appealing.

Would love feedback on potential fixes! 🚀

[github-actions]

Congratulations on making your first Issue! 🎊 If you haven't already, check out our Contributing Guidelines and Issue Reporting Guidelines to ensure that you are following our guidelines for contributing and making issues.

[palisadoes]

We are now focusing on three types of issues as priority areas:

1. The improvement in the reliability of our code base. There are many issues created to test existing code. It is a good place to start if you want to understand the operation of various apps. When you submit PRs, we automatically check to see whether the code you submitted has been covered by testing and that each file meets the minimum standard level of the repository as a whole. You won’t be able to avoid understanding testing regimes to contribute to Talawa.
2. The fixing of bugs and features that seriously hamper the user from using the application. The apps have various shortcomings. The most obvious ones are where the apps do not work as expected. For example buttons that don’t work, errors or messages that are not displayed to make the user understand what to do and many more. Think of any difficulty you have had in getting things working, there could be a bug there waiting for you.
3. Coding of screens for issues created by our Contributor team based on our soon to be updated design guide. This may include updates to existing screens.
4. The creation of additional or updated documentation that helps with improving both the experience of the end user and the various GitHub contributors who support the development of our software. This would include user guides.

We will only be accepting feature issues for deficiencies that are obviously lacking in the apps. These are things that make it very difficult to operate the apps. Even so, the PRs will still require you to understand testing as stated before.

Cosmetic changes that require only a few lines of code, or relate to screen sizes unlikely to be used are not acceptable under this policy.

Closing