Joydeep Halder
@halderjoydeepAll comments
- @shimul0022Submitted over 2 years ago@halderjoydeepPosted over 2 years ago
Hi @shimul0022, Great work! But I would like to give you some suggestions-
- Use
display:block
for 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 helpful1 - Use
- @874anthonySubmitted over 2 years ago
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.
@halderjoydeepPosted over 2 years agoHi 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 - @itsgonenowSubmitted over 2 years ago
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.
@halderjoydeepPosted over 2 years agoHi, 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 helpful1