@elaineleung
Posted
Hi Pon, yes, what I see on my browser (I'm using Firefox) is what you see in the screenshot generated. What are you using? There are some differences between browsers, such as how they each have their own default styles already (hence the need for a CSS reset in our code), but generally it's usually with older browser versions where there may be issues still. Nowadays you don't see that much of a difference on commonly used browsers if the stylings are written up well.
About using a <div> tag for image versus using an <img> tag: It's generally easier to use a <div> with background image when you need to change the image for responsiveness (which you can do using media queries), but for images that relate to the content of the site, like a logo or a product image, it's preferred to use a <img> tag with the <picture> element. I used <div> only because it was easier for responsiveness/resizing and positioning; I can just use properties such as background-size and background-position. For <img>, I'd have to use object-fit, which at times isn't as easy to work with (at least for me), but if I were to work on this challenge again, I'd most likely use an <img> tag.
If you're using VS Code, you should be able to get the path for <svg> when you click on the file in the VS Code file browser.
Hope this helps you out, feel free to keep asking questions!
Marked as helpful
@ponhuang
Posted
@elaineleung
Thank you Elaine ☺️
I used google chrome, and true, if I use firefox then it shows this width problem.
Today I tried to find the issue, and seems it is the width of the card and card-img size. Therefore, I change the max-width to specific number. Now the problem switch to the share-container cannot align center to the shar icon. lol
I need to take a good look how you write the HTML and make it align center.
@elaineleung
Posted
@ponhuang I just tried this in the inspector and managed to make the card-img size more normal, so try this:
For your desktop view, write this into your .card-img:
.card-img {
width: 285px;
img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: left;
}
}
I think that as long as your img is always at 100% for height and width with object-fit: cover added, you can easily manipulate the image parent's widths and not need to to worry about the image. The image parent is like a photo frame, so instead of changing the size of the image, just change the frame.
For your share icon in the mobile view, since your share container has a position: absolute, the two can't be positioned in relation to one another as they also don't share the same parent. You'd only be able to center them if they are within the same parent container and are not in position: absolute. What I'd do is, I'd make the share icon position: absolute also, like this:
.share-icon-box {
position: absolute;
right: 0;
top: 1rem;
// share-icon-box's parent needs position: relative
.author container {
position: relative;
}
Hope this help!
Marked as helpful
