Skip to content
OverviewSolutions
6
Comments
3
Joydeep Halder
@halderjoydeep

All comments

  • Joydeep Halder•110
    @halderjoydeepPosted about 2 years ago

    Hi @shimul0022, Great work! But I would like to give you some suggestions-

    1. Use display:block for img. Then that little white space below the image will disappear. It will fit perfectly.
    2. 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
  • Anthony Acosta M.•100
    @874anthonySubmitted about 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.

    Product Preview Card

    2
    Joydeep Halder•110
    @halderjoydeepPosted about 2 years ago

    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
    @itsgonenowSubmitted about 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.

    Responsive page using grid

    3
    Joydeep Halder•110
    @halderjoydeepPosted about 2 years ago

    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