Product Preview Card Component - Solution

Community feedback

• 

  Charles Mueke•170

  @CharlesMuekePosted over 1 year ago

  Hello congratulations on this project

  Why you couldn't solve the display between 501-610px its only because the only media query you did was for media screen below 500px. Try to do media query for screen below 768px or 610px and see.

  @media screen and (max-width:610px;){ ....} OR @media screen and (min-width:500px){ ..... }

  Hope this is helpful.

  1

  ---

  

  Red•170

  @red-jpoPosted over 1 year ago

  @CharlesMueke Hello, thanks (^_^)

  I tested your suggestions and these were the results:

  @media screen and (max-width:610px;) Similar problem, different placement, at 501-610px width tries to use the desktop image on the mobile layout and creates an empty space on the right side and doesn't fill the div class: image-container.

  @media screen and (min-width:500px) Anywhere above 500px width the layout gets stuck in the mobile version with the desktop image, which creates an empty space on the right and doesn't fill the div class: image-container; At 499px and bellow it tries to use the desktop version with the mobile image thus creating an empty space at the bottom of the div class: image-container.

  It didn’t worked, but it was worth the shot. I appreciate you reaching out and trying to help, thank you.

  0

  

  Charles Mueke•170

  @CharlesMuekePosted over 1 year ago

  @red-jpo

  You were given a mobile image right? if so did you use it?

  1

  

  Red•170

  @red-jpoPosted over 1 year ago

  @CharlesMueke

  I did used the mobile image, the bug was happening in the desktop version with the desktop image. Nevertheless, since you kept asking I kept poking, I increased the set max-width bit by bit both in the source media and the @media screen. At 699px it worked and now the design flows without problems. Thank you!

  0