Need a suggestion related to image
Olesia Kissa
@olesiakissaAll comments
- @amandeep2603Submitted almost 3 years ago@olesiakissaPosted almost 3 years ago
Hi @amandeep2603!
It looks like the issue is caused by the
align-items: center
in your.card
rule. I would suggest you to remove it or simply explicitly set it tostretch
instead. This way you won't need to useheight: auto
on the image element.Hope this helps :) Good luck!
Marked as helpful1 - @simon-baumhauerSubmitted about 3 years ago
Can you please give me some feedback, would be greatly appreciated.
@olesiakissaPosted about 3 years agoGreetings, @simon-baumhauer! The markup looks good, however the styling needs some fixes:
- I would recommend you to check your body
background
property on both layouts because the color disappears once the viewport is > 375px and also the background url seems to look for the svg pattern file that's not in your project folder. You should update your repository with the corresponding images and I think it should work fine. - Your annual plan container
background
color isn't the one specified in the style guide, make sure to check out the codes for the color.
Good luck on your next proejcts :)
P.S. check out the
title
tag in your html file, if you leave it as empty it may cause issues during validations.0 - I would recommend you to check your body
- @amakaogujioforSubmitted about 3 years ago
I would appreciate feedback. Thanks
@olesiakissaPosted about 3 years agoHey @amakaogujiofor :)
This looks great! I would recommend you to edit padding on your paragraphs from just regular 0.7em to
0.7em 0
-> this will fix the paragraph shift that happens on the desktop version and it is meant to save the visual hierarchy of the whole design. And I would also align h2 in your details section with texts below. (text-align: left
)I hope this helps!
Marked as helpful0 - @PhanHuuLanSubmitted about 3 years ago@olesiakissaPosted about 3 years ago
Hi @PhanHuuLan! I would like to recommend you some things :)
- Your image doesn't show up because of the invalid url, try updating the link by removing / in the beginning to make it look like
/images/image-header-desktop.jpg
(this will fix the path) (you can also check out more information on relative links) - You should add some margins/max-width to the card's wrapper. And although the rest of the markup looks good, the overall look can become stretchy because wrapper takes up all the space
- Content's
margin-bottom
seems to be too large, try changing it to smaller value (2em seems just fine)
Hope this helps!
0 - Your image doesn't show up because of the invalid url, try updating the link by removing / in the beginning to make it look like
- @d4lbitSubmitted about 3 years ago
I don't get why the card doesn't resize as I make my window smaller - if you could help me with this it would be amazing. Thank you for your help!
@olesiakissaPosted about 3 years agoHi @d4lbit! At this point you have set your card width as max-width: 345px; so it's going to stay no more than that width at all screen sizes because the value is hardcoded in px. If you would like to make the card shrink on smaller screens, you should try writing a media query for the screen size of 375px for instance and set card's width like 90% of the screen (or whichever size you want it to be). Hope this helps :)
P.S. I would also suggest you to change your container to 'div' (you have written it as <container class=
container
>) because it causes an issue in HTML validations.0 - @awwsmanSubmitted about 3 years ago
This is my second project. I learned how to apply letter-spacing and hr tag properties Also completed this project in lesser time than i did with the first project
@olesiakissaPosted about 3 years agoYou did a great job on this challenge! It's interesting how you use scale() to change the size of the objects instead of making them fit small containers with the predefined size. One thing I would recommend in general is choosing more meaningful class names in the main content section. Maybe you should try something like ''content-area/authorship-area" instead of "second/third" because it makes the process of reading code easier. Good luck :)
0