@SubrinaSharmin
Latest solutions
Responsive Product Preview Card
PSubmitted 4 months agoI'd love to know how to make this even more responsive. Is there a way to make the card and its contents grow and shrink as the screen size is adjusted while keeping everything proportional?
Recipe Page using HTML and CSS
PSubmitted 4 months agoIs there any beginner mistakes I can clean up, or anyway of making this code more concise?
Social Links Profile Solution
PSubmitted 5 months agoAny feedback on how to make my code cleaner, more concise, or more responsive would be greatly appreciated!
Blog Preview Card Using HTML & CSS
PSubmitted 6 months agoI can't figure out why cursor: pointer; only works sometimes? It seems glitchy, like I see it for a moment and then it disappears. Might be something with my code.
Would love to know how to calculate rem measurements!
QR Code Card using basic HTML and CSS
PSubmitted 7 months agoIs there a specific way to center divs on a page?
Any tips on how my code could be improved would be much appreciated!
Latest comments
- P@Babyjenx
Nice work! This is pretty close, although the media queries don't seem to be having any effect.
There is a small gap at the bottom of the image. This can be fixed by using:
.card-image { display: flex; }
To get the card-image and card-content evenly taking up half of the card try:
.card-image { width: 50%; }
and
card-content { width: 50% }
The first media query you have is empty: @media (max-width: 23.44em) and (min-width: 90em) { }
It also won't work because 23.44em (375px) and 90em (1440px) never overlap. I'd suggest removing it.
Try replacing your media query with this:
@media only screen and (max-width: 600px) {
.card { display: flex; flex-direction: column; }
.card-image { width: 100%; }
.card-content { width: 100%; } }"
Lastly, "Gabrielle Essence Eau De Parfum" and "149.99" should be using, font-family: Fraunces;
Marked as helpful - @jsemenborodasP@Babyjenx
Nice work, and great use of media query! Layout looks really solid as well and the breakpoint is clean. Some of the colors look a little off. The background is more of a grey than light brown and all the <p> text is brown instead of black.
I think the bottom Nutrition table would be better structured as a table in the code for better semantics and maintainability. i.e. If you add more nutrition values later a table is simpler and avoids repetitive divs.
- @GustaMndsWhat are you most proud of, and what would you do differently next time?
Nada a dizer
What challenges did you encounter, and how did you overcome them?Nenhum desta vez
What specific areas of your project would you like help with?Ainda na responsividade
P@BabyjenxNice work! Your code looks very clean and concise, and your website is almost an exact match. My only minor comment would be your top and bottom margins of the link card are just a little bit smaller than the example. Other than that excellent job!
- P@Sven-27What are you most proud of, and what would you do differently next time?
It was already more easy to work with figma. I now understand how it is made. It was nice to learn how to make the fonts responsive with clamp instead of media queries.
What challenges did you encounter, and how did you overcome them?No big challenge yet.
What specific areas of your project would you like help with?Just all feedback is welcome. Improving is what it is about.
P@BabyjenxThis looks damn near perfect! It's good you worked with Figma on this, it takes the guessing game out of the design which is super helpful. I like the responsiveness of the design, the "Challenge By Frontend Mentor..." copy floats around nicely when I scale my browser window. Code looks clean and easy to follow. Nice work!
- P@leonardoalmeida7P@Babyjenx
Layout looks really good! QR code stays centered and at a fixed size when window is adjusted smaller/bigger. Code looks really clean to me. Size of QR card could be reduced by 25%. Copy line breaks could be better matched.
Marked as helpful
