P
@nashrulmalik
Latest solutions
Latest comments
- P@Ronnarit00000
Good job.
- @SydsBikeP@Ronnarit00000
Well done! It looks good.
- P@lia-oliveiraWhat challenges did you encounter, and how did you overcome them?
The challenges were many. For example:
Positioning the image in the background The floating numbers The hero image splitting into two separate images I researched, watched an entire course on Flexbox, and used a trial-and-error approach.
What specific areas of your project would you like help with?I’d like to learn how to position a background image exactly as it appears in the layout and how to control its "zoom" effect.
P@Ronnarit00000The pictures size moblie, table and desktop are of different sizes. Make the background "zoom" effect."
This solution use image desktop-size from url('./../images/desktop/image-footer.jpg') only.
step 1 : remove image style on viewport 1440
@media (min-width: 1440px){ .bkg-image { /*remove this*/ background-image: url('./../images/desktop/image-footer.jpg'); /*remove this*/ background-position: top; /*remove this*/ } }step 2 : remove image style on viewport 768 - 1440
@media (min-width: 768px) and (max-width: 1440px) { .bkg-image { /*remove this*/ background-image: url('./../images/tablet/image-footer.jpg'); /*remove this*/ } /*remove this*/ }step: 3 change image background in the line code : 322
from
.bkg-image { /*image mobile size*/ background-image: url('./../images/mobile/image-footer.jpg'); }to
.bkg-image { /*image desktop size*/ background-image: url('./../images/desktop/image-footer.jpg'); } - @tarekulWhat are you most proud of, and what would you do differently next time?
- Add CSS Grid layout with responsive breakpoints
- Create custom color variables for consistent theming
- Implement smooth transitions for width changes
- Add tablet-specific layout for better UX
- Update README with solution screenshots and learnings
-
Grid Layout Complexity
- Creating a responsive grid that accommodates differently sized cards
- Managing the unique layout where the first card spans two columns and the last card spans two rows
- Ensuring the grid maintains visual hierarchy across different screen sizes
- Implementing a tablet layout that effectively breaks down the desktop design
-
Responsive Design Issues
- Cards initially stacked incorrectly in mobile view due to inherited grid positions
- Had to carefully consider breakpoints (768px for mobile, 1024px for tablet)
- Needed to adjust the container width (90% mobile, 75% tablet, 55% desktop) for optimal viewing
- Added max-width to prevent layout from becoming too wide on large screens
-
CSS Specificity Challenges
- Encountered issues with grid positioning rules conflicting between breakpoints
- Explored two solutions:
/* Solution 1: Using !important */ .card { grid-column: 1 !important; } /* Solution 2: Using specific selectors */ .card:nth-child(1), .card:nth-child(2)... { grid-column: 1; } - Learned about the trade-offs between using !important and more specific selectors
-
Design and Styling Details
- Implementing the quotation mark background image with correct positioning
- Creating consistent card styles with proper border-radius and padding
- Managing text opacity for different elements (verified status, testimonial text)
- Styling profile images with border effects and proper sizing
-
Performance and Optimization
- Adding smooth transitions without affecting performance
- Using CSS custom properties for maintainable color management
- Organizing CSS with proper grouping of related properties
- Ensuring the layout transitions smoothly between breakpoints
N/a
P@Ronnarit00000Hey @tarekul Good work!.
- P@mariosearchteamWhat are you most proud of, and what would you do differently next time?
This one was pretty straight forward, only the top borders of the cards needed a little research to get them straight.
The scss loop for the four border colors was fun! :)
What specific areas of your project would you like help with?Every feedback is appreciated, maybe there are more flexible ways to setup the grid?
P@Ronnarit00000Good work! I like your feature-card. I have easy way setup grid by create map for feature-card use grid-template-areas
@media screen and (min-width: 55rem) { .features { &__cards { /*create map*/ grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "card-cyan card-red card-blue" "card-cyan card-orange card-blue" ; } &__card { max-width:350px; /* fixed card max-width*/ min-height:250px; /* fixed card min-height */ } &__card-cyan { grid-area:card-cyan; align-self: center; /* set card center*/ } &__card-red { grid-area:card-red; } &__card-orange { grid-area:card-orange; } &__card-blue { grid-area:card-blue; align-self: center; /* set card center*/ } } } - @AnaghaInoweiP@Ronnarit00000
good work!. one thing in class .card size is over, can try add max-width: 350px and min-height 250px.
Marked as helpful
