Hi everyone,
I am following KP's tutorial on the Front-End Mentor product card challenge, but when I open the page in live server initially, the container containing the text is much wider than the image - would someone know what step I have missed here?
Also, when I open the page with the 'toggle' button in the 'responsiveness view', I am unable to see the full width of the page (part of is is 'clipped').
Would someone be able to point me in the right direction so that I can fix these two issues please?
https://github.com/CodeCara/product-preview-card-component-main
GitHub
GitHub - CodeCara/product-preview-card-component-main
Contribute to CodeCara/product-preview-card-component-main development by creating an account on GitHub.
8 Replies
you want to limit the size of it with a
max-width property probably 🙂thank you. should I be using max width 100% then?
nope you are suppose to come up with a maximum size you want your card to be. it's at 100% right now 🙂
thank you. I have just 'eyeballed' the size of the image and set the max-width to 40 rem, rather than pixels (to make it responsive). So just in general, if I have a misalignment between an image and textcontainer like that, I should just resize the container to roughly the same width as the image, as a general rule I mean?
it entirely a preference you can make it as big as you want. Your only limiting factor is the size of the image because if you make the card bigger then the image the image will start loosing quality if you decide to stretch it to fill the whole width of the card
thanks. The only thing that is confusing me though is that the container was bigger than the image, but the image wasn't stretched? that's why I wanted to resize the container down, so as to now have the gap betweeb the image and the container..
the image won't stretch unless you tell it to. By default it's gonna use it's actual size
ok, great. thanks so much for your help