@devsimocastlesSubmitted almost 3 years ago
I feel I did it bad, It doesn't looks very similar to the reference design...
pd: i dont know why the image in the preview looks like it has margin-right, works well in live url
ian
@iannnopAll comments
- @iannnopPosted almost 3 years ago
It looks fine to me! I didn't see anything in the css or html file that would be causing the margin-right to appear in the screenshot, but it looks great
Nice work
Marked as helpful1 - @JJOosthuizenSubmitted almost 3 years ago
Hello Everyone, Here is my solution for this challenge. I'm not entirely sure how to fix the background to have it fully stretched. Any other advice would be appreciated. Thank You in advance.
@iannnopPosted almost 3 years agoHello!
You can use the
background-sizeproperty to size the background in the same element where you declare the background. You can find the documentation on it hereIf you have one argument for background-size, it'll define the width of the background image, but for this challenge specifically, I felt that the curve wasn't aligning with the design image, so I also adjusted the height by adding a second argument.
Hope this helps!
Marked as helpful1 - @kmil31Submitted almost 3 years ago
I am wondering on how to adjust the size for mobile and desktop respectively. Was thinking of using media queries, but am quite uncertain on what exactly to implement for responsiveness. Any tips and suggestions?
@iannnopPosted almost 3 years agoFor this design, you won't need to implement responsiveness because the card doesn't really scale too much with the size of the browser, but generally, you can make designs responsive by using rem, em, or percentage based units instead of pixel units in your css (only for things you want to change with respect to the size of the browser). I usually use media queries when the changes are more dramatic, like a completely different layout for desktop vs tablet/mobile.
Marked as helpful2
