@KarneshSingh05
I started programming with the goal of creating practical applications. Specialized in React JS for front-end development and studying React Native, I aim to expand my knowledge in mobile applications. I plan to study back-end development to complete my software development education.
I’m currently learning...React.Native
Latest solutions
Responsive using flexbox media querys and clamp
Submitted 9 months agoThe height its still goes out of windows, even when using 100dvh on body as min-height. so if you can comment how to fix it it ll help me a lot :D
Responsive usig media querys
Submitted 9 months agoI couldn't make fonts works correctcly, i see it a litle pixelated. and seems not to match desing. i download fonts and import locally
Latest comments
- @Isa696
Great work! I noticed you used grid-column-start and grid-column-end instead of grid-column: 1 / 3; and grid-row: 1 / 2;. Both approaches work the same, but the second one is a bit more concise. However, your way can be more readable, so it really comes down to personal preference.
Here’s a small suggestion: you could centralize your color variables by defining them in the :root like this:
css Copiar código :root { --Moderate-violet: hsl(263, 55%, 52%); --Very-dark-grayish-blue: hsl(217, 19%, 35%); --Very-dark-blackish-blue: hsl(219, 29%, 14%); --White: hsl(0, 0%, 100%); --Light-gray: hsl(0, 0%, 81%); --Light-grayish-blue: hsl(210, 46%, 95%); } Then you can reuse them as var(--color-name) in your CSS. It helps keep the code more maintainable and scalable. What do you think? 😃"
- @ibrahimelsarawy@Isa696
You did great! I just recommend adding some gap or padding inside the cards to ensure they all maintain the same size. I noticed that in windows smaller than 768px, some cards are a little bigger due to different text lengths. Additionally, you might consider using the main tag instead of a div. These are just slight adjustments. 🙌
- @Mckaay@Isa696
Hi you did a good job. Real good css clear and readable. But i see flex direction no working on my browser. I 'm using brave Browser
Marked as helpful - @KoulibaliDramane@Isa696
Your desing its almost identical on desktop. Only diference its the margin bottom.
I would recommend checking the mobile design. It will require some media queries to remove the card container and make the image and card width at maximum.
I know this exercise is quite simple, but I think using a CSS reset will ensure total control over margins, paddings, etc.
Also, in my opinion, using relative sizes for paddings, margins, and fonts will result in better responsiveness.
You did a great job!!! 🙌
Marked as helpful - @EnochofGod@Isa696
Hi, you did a good job! To fix the background color, check the styles README guide. It contains all the styles, colors, fonts, etc.
- @JoaoVitor2004@Isa696
i got same problem with gap and padding / margings so i cant help 😔. i ll recomend checkout the figma file. The border-radius i think its 20px. its just a minor detail. You did it great 👍!!!
