Shimul• 40
@shimul0022
Submitted
Joydeep Halder
@halderjoydeep
All comments
- Joydeep Halder• 110
@halderjoydeep
Posted
Hi @shimul0022, Great work! But I would like to give you some suggestions-
- Use
display:blockfor img. Then that little white space below the image will disappear. It will fit perfectly. - don't give margin for top and bottom. Setting margin bottom is good practice.
.written-content, .price, .cart, .attribution { margin-bottom: .8rem; }Regarding margin, you can refer to this amazing post. You will understand how margin actually works and the concept of margin-collapse. https://www.joshwcomeau.com/css/rules-of-margin-collapse/
Marked as helpful
1 - Use
- Anthony Acosta M.• 100
@874anthony
Submitted
Hi everyone, I just want some feedback about best practices when trying to display one image or another, so when I did the design for mobile I needed to use the mobile version of the image, and then for desktop the larger one, but needed to use JavaScript for that
Is any possible way to do this with CSS that I'm missing? Or it just can be done with JavaScript only?
Thanks in advance for any other tip or recommendation.
Joydeep Halder• 110@halderjoydeep
Posted
Hi Anthony, instead of javascript, you can use two img. one for desktop version and one for mobile. on desktop screen, make mobile image display to none. and for mobile screen, make desktop image display to none.
1 - nomatter• 110
@itsgonenow
Submitted
Placing the quotation mark svg took the most time and I still could not figure it out. I am unsure whether articles giving a lot of bottom empty space when stretching vertically is normal.
Joydeep Halder• 110@halderjoydeep
Posted
Hi, You've done great job!
Regarding that quotation mark, You can simply use it as background-image and position that image accordingly. Also, it's good practice to keep the images in a single folder.
background-image: url("images/bg-pattern-quotation.svg"); background-repeat: no-repeat; background-position: 90% 0;
Marked as helpful
1
