@VCarames
Posted
Hey @ywsoliman, some suggestions to improve you code:
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
-
I recommend adding a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.
-
You can clean up and gain better control of your Grid-Template-Areas but doing the following:
Here is how it looks like fully implemented: EXAMPLE
Desktop View Code:
.testimonial-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"daniel daniel jonathon kira"
"jeanette patrick patrick kira";
gap: 30px;
}
.daniel-card {
grid-area: daniel;
}
.jonathan-card {
grid-area: jonathon;
}
.jeanette-card {
grid-area: jeanette;
}
.patrick-card {
grid-area: patrick;
}
.kira-card {
grid-area: kira;
}
Happy Coding! 👻🎃
Marked as helpful