Enhance Grid Responsiveness, Consistent Card Heights, Flexbox Alignme… #248
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nt, and Add Vibrant Color Scheme with Hover Effects in About Section
…ic and modern hover effect
…reating a dynamic and modern hover effect
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update improves the grid's responsiveness with flexible columns, ensures consistent card heights using min-height, and applies flexbox for proper vertical alignment and spacing. Additionally, a vibrant color scheme with gradient backgrounds and hover effects has been added to enhance visual appeal.
grid-template-columns:
Uses repeat(auto-fit, minmax(300px, 1fr)); to maintain a flexible grid layout with a minimum width of 300px per card. This ensures the grid adapts well to different screen sizes while keeping the cards at a consistent width.
Consistent Card Heights:
min-height: 450px is applied to ensure that all cards maintain the same height, even if their content varies. You can adjust the height value to match your design needs.
The display: flex and flex-direction: column properties are used inside the cards to vertically stack the content and ensure that the content within the card is well-aligned.
Equal Spacing Inside Cards:
justify-content: space-between: Ensures the title, text, and button have equal vertical spacing within each card.
flex-grow: 1: Ensures the paragraph element stretches to fill the remaining space in the card, helping to maintain a uniform height between cards.
Responsive Design:
The grid automatically adjusts to fit multiple cards in a row, depending on screen width. Each card will be a minimum of 300px wide and will adjust as the viewport size changes.
The overall structure remains consistent on all screen sizes, maintaining the clean, level layout.