Feat: Improve Responsive Design and Accessibility in CSS Styling
Closed this issue · 1 comments
Describe the feature
Accessibility Enhancement:
Define appropriate color contrasts for text and background colors to ensure readability for all users, including those with visual impairments.
CSS Variables Usage:
Define and document CSS variables for background and text colors to maintain a consistent design throughout the project.
Responsive Design:
Update the media query for screens up to 768px to avoid distorting the aspect ratio of the iframe content. Set only the width of the iframe and let the height adjust proportionally.
Responsive Margins and Padding:
Revise the margins and spacing within the .ele class to ensure content is well-arranged on all screen sizes.
Adjust padding values within the .main class for better spacing and visual appeal on smaller screens.
Font Styles Consistency:
Ensure font size, family, and weight are consistent across various headings and text elements for a cohesive design.
Comments and Documentation:
Expand and clarify existing comments to provide more detailed explanations of the code's purpose and functionality, especially if the code will be shared with other contributors or for future reference.
Add ScreenShots
Unable to upload SS
Record
- I agree to follow this project's Code of Conduct
- I'm a GSSOC'23 contributor
- I want to work on this issue
Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.