38 lines
1.6 KiB
Markdown
38 lines
1.6 KiB
Markdown
# Update Plan: Features Section Alignment Improvement
|
|
|
|
## Target
|
|
Improve alignment of the "What do you get to see?" features section for better visual consistency and professional minimal layout.
|
|
|
|
## Current Situation
|
|
- features-grid uses flexbox with flex-wrap and justify-content: center.
|
|
- feature-card has no fixed width or flex-basis, causing uneven spacing or alignment.
|
|
- Cards rely on natural flex width from content, which may cause inconsistent sizes.
|
|
|
|
## Plan
|
|
1. Change `.features-grid` layout from flexbox to CSS grid for precise control.
|
|
- Use grid-template-columns with repeat(auto-fit, minmax(250px, 1fr)) for responsive column number.
|
|
- Set uniform gaps both vertically and horizontally (e.g., gap: 2rem).
|
|
|
|
2. Assign a max-width and consistent padding to `.feature-card`.
|
|
- Ensure equal size cards across rows.
|
|
- Use a slightly reduced box shadow for a minimal look.
|
|
|
|
3. Adjust `.features-grid` margin-top or padding for good spacing from headline.
|
|
|
|
4. Add media queries if necessary for smaller screen breakpoints for good stacking and consistent card width.
|
|
|
|
5. Maintain existing font sizes, colors, and icons but ensure consistent vertical alignment for icon, title, and description.
|
|
|
|
## Follow-Up
|
|
- Test updated layout across desktop and mobile widths.
|
|
- Check for visual balanced spacing and alignment.
|
|
- Verify no overlap or overflow issues.
|
|
|
|
---
|
|
|
|
This plan will apply updates only to the features grid and card styles in `src/Pages/Webinar/WebinarLandingPage.scss`.
|
|
|
|
---
|
|
|
|
Please confirm if I can proceed with these precise alignment focused changes for the features section.
|