Design comparison
Solution retrospective
Hello team! hope you are doing fine.
This is my 2nd challange i did for frontendmentor.io
I have a couple questions.
A) I couldnt make the border radius on the pictures as the example you sent me.
B) i couldnt get the text in the same way you sent me
C) im having issues to leave the card in the middle of the page. Same with the last challenge (the qr code one), i had to watch a youtube video and in one the guy was using the
min-height: calc(100vh - 1px);
and in the other one
max-height: calc(100vh - 1px);
Im really confused on how it works, do you have any tip to understand it?
Thanks!!!
Community feedback
- @gauravsingh1281Posted about 2 years ago
Hii Facundo , Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the cursor pointer property on the button element when a user hover the button there should be a cursor which make your website more interactive.
The answer of your doubts are --
A) for border-radius you have to give border radius to image like this
for desktop design
img { border-radius: 12px 0 0 12px; }
for Mobile design
img { border-radius: 12px 12px 0 0; }
B) for text you have to give font-size in px and also give font-weight like this -
for Heading
h1 { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700; }
For description
.product, .desc, .style { font-family: 'Montserrat', sans-serif; color: var(--dark-grayish-blue); font-size: 18px; font-weight: 500; }
For button to take full width of the container give 100% width and also give some padding like this
button { width: 100%; font-size: 22px; padding: 15px; }
C) for Centering the card use CSS display Property and give min-height 100vh like this -
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
Marked as helpful2@1991facundoPosted about 2 years ago@gauravsingh1281 Thank you very much for taking the time for such a detailed explanation!
1@grace-snowPosted about 2 years ago@gauravsingh1281 @1991facundo
One clarification to add: Never ever put font size in px. You should be using rem there, a responsive unit that scales properly on all devices no matter the operating system, browser or device settings
2 - @DeolabestPosted about 2 years ago
Hey @1991facundo, Congratulations on completing this challenge!
Regarding your question:
A. This should your border radius issue for the desktop image:
.img-dsk{border-bottom-left-radius: 10px; border-top-left-radius: 10px; }
B. I don't understand this question.
C. To place the card in the center of the page do this:
body { min-height: 100vh; align-items: center; display: flex; flex-direction: column; justify-content: center; }
Keep doing a good job!
img-dsk"
Marked as helpful1@1991facundoPosted about 2 years ago@Deolabest
Thanks for the clarifications.
My second question was related to the font, in the example ive been sent looks different than my image and i dont know if its a font size problem or something else, because i thought to use a <br> but ive been reading that using that is not a good practice.
0 - @HenriqueDummerPosted about 2 years ago
Hello facundo, how are you?
I think i have a solution for your problem A.
You can simply apply "overflor: hidden " in your container, this hides anything that cross the limits of the element you're applyng it to
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord