
...
@HatimHJAll comments
- @Abasalamin91@HatimHJ
.container-grid { display: grid; width: 200px; /* grid-template-rows: 1fr 140px; */ }
- @Eman-Abdallah@HatimHJ
i'm learning github [especially pull request] that whyi fork your project (hope you don't mind)
- @MahdiRezaeiDev@HatimHJ
nice work. try padding top and bottom for the main tag
- @rio-rifaldi@HatimHJ
you put the colors in css variables in the body selector when dark mode clicked you give the body class like 'dark' in other slector [body.dark] you change variables colors .
that how i did it in this challenging and it worked fine. there's a little bit of javascript
Marked as helpful - @TheAwesomeTechGirl@HatimHJ
media (max-width: 375px){ .container {
grid-template-columns: 1fr; // add this to the container
}
.images {
grid-row: 1; // this to the image
}
//or .text-box { grid-row: 2; // this to the text }
}
Marked as helpful - @KurtJF@HatimHJ
congratulations on finish the challenge
Is there a set breakpoint for responsive media query?
- Mobile: 375px
- Desktop: 1440px
when you code you should start with mobile then you adjust for desktop. this how i do it and it work ok for me
- @Hazard-58@HatimHJ
you can use [filter: brightness(0) invert(1);] to make the footer logo white
Marked as helpful - @hebertpxx
- @nyakita@HatimHJ
for the button try use [button:hover] insted of [button:active]
for the grid try this site [ https://cssgridgarden.com/ ] great for learning css grid
if you find this helpfully please mark as helpfull
Marked as helpful - @moataz-serag
- @alpbrace@HatimHJ
2- How can I create the section with the header "Ready To Build Your Community?" before the footer, without using position absolute and in a better responsive way?
i did it with [ transform : translateY(-value) ] and it worked fine
Marked as helpful - @HatimHJ@HatimHJ
i'm using aos library that's why the content not showing in the DESIGN COMPARISON check the site if you interested
- @MugeshTRG@HatimHJ
try [margin : auto] on card class to remove vertically scrollbar Hope it helps:)