@slackwaree
@AntennaeVY
Submitted
What are you most proud of, and what would you do differently next time?
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 ?
@slackwaree
Posted
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!
@m-rooeintan
Submitted
What are you most proud of, and what would you do differently next time?
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.
@slackwaree
Posted
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*/}
}
@Hadisuhail188
Submitted
What are you most proud of, and what would you do differently next time?
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.
@slackwaree
Posted
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.
Marked as helpful
