I struggled with aligning the avatar images next to the two blocks of text, and ended up just using a margin to do it. I tried giving the img elements display: inline-block and vertical-align: middle but they didn't move at all.
Was the method that I used to align the left and right cards viable? Was there a better option? It feels kind of hacky.
Is there any way I could make my CSS code a little smaller while keeping it easy to read? I feel as though 90 lines for a project of this size is quite a bit.
I feel like the avatar image at the bottom of the card is not aligned horizontally with the text, and I'm not sure how to fix that. I've set the img element to have vertical-align: middle; but I'm not sure what else to do other than that.
I did it
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?Margin vs padding ?
Great work! When you say "margin vs padding?" are you asking about the differences between the two?
margin is used to set the distance between elements while padding is used to set the distance of the content within an element from the edge of that element.
Hope this helps!
Nothing
What challenges did you encounter, and how did you overcome them?To change product image from desktop mode to mobile mode, I use "background-image".
What specific areas of your project would you like help with?Is there another way to change the image? I'm having trouble getting the links to display properly on GitHub. How to address so that images and fonts are loaded correctly in the live view? That is a big problem for me.
Hi, are you having trouble with changing the image when a certain viewport width is met? A simple way of doing this is by giving each img element an id, respective of their use case. Then in your CSS file, hide one of the elements using display: none, and create a media query to display that image when the viewport width is met. Also, make sure to hide the other image. Example:
HTML:
<img src="image/source" id="perfume-image-mobile">
<img src="image/source" id="perfume-image-desktop">
CSS:
#perfume-image-desktop {display:none}
@media only screen and (min-width: 769px) { /* Desktop styles */
#perfume-image-mobile {display:none;}
#perfume-image-desktop {display:/*block/grid/flex*/}
}
I am most proud of the face that I was able to finish this very fast and was very comfortable doing it.
What challenges did you encounter, and how did you overcome them?One of the challenges that I encountered but was laster solved was that I didn't know how to upload the picture in the website but then I figured it out and it was quite exciting.
What specific areas of your project would you like help with?I would like help with the media queries as I am still not aware of how they work.
Great work! Instead of using media queries to change the size of the boxes, you can set their width to 100% (or any other value). This way, the boxes will always fit the width of their parent container - negating the use of media queries.
