Stats preview

Community feedback

• 

  Carl•855

  @CarlHummPosted over 1 year ago

  Hello there

  Your media queries are working, and your images are loading correctly.

  Your .containers flex-direction property is set to row, so it is attempting to display .item1, and .card-img on the same row.

  .item1 has nested content and fixed spacing measurements so has an implicit minimum width. .card-img is just a div with no nested content or minimum width. So as the screen size gets smaller, .card-img shrinks to adapt, reducing in width.

  Eventually .card-img shrinks so much that it has no width, disappearing. This can be seen in this quick video, where as the screen shrinks, the image gets cut off like a closing curtain, or clipping mask.

  One of the ways to fix this would be to

  1. Set .container to flex-flow: column-reverse on mobile viewports.
  2. Set a minimum height for your image (when displayed as a row it inherits the flex containers height, so you need to set a height when stacking vertically)
  3. Add media queries for when screen size increases, and set .container to flex-flow: row on desktop viewports.
  4. Add a maximum width to your card element to stop it expanding.

  When choosing to load a different sized image based on screen size, it might be worth checking out the picture element. It makes this very easy.

  Marked as helpful

  0

  ---

  

  Maliha Fatima•150

  @malihacodesPosted over 1 year ago

  Thank you so much , You are an angel @CarlHumm

  0
• 

  Victor imafidon•590

  @OsauyiPosted over 1 year ago

  It may be the url file path. If both of them works on your local server try using another path or check for errors on the mobile image path

  0