Loopstudios Landing Page

Community feedback

• 

  Ahmed Faisal•5,095

  @afrussel

  Posted over 1 year ago

  Hi @hadreemustaffa

  Your code appears to use the <picture> element correctly for responsive images by utilizing <source> tags with different media queries to provide different image sources based on screen sizes. However, without specific details about the problem you're facing, it's challenging to pinpoint the issue accurately.

  Here are a few general pointers to check:

  1. File Paths: Verify that the paths to your images are correct (src and srcset attributes). Ensure the images are in the specified locations relative to your HTML file.

  2. Media Queries: Double-check your media queries in <source> tags to confirm they match the intended screen sizes. This ensures the correct image is loaded based on the device's resolution.

  3. Fallback <img> Tag: Confirm that the <img> tag inside each <picture> element provides a default image (src) for browsers that don't support the <picture> tag or media queries.

  If images are not displaying as expected, check your browser's developer tools for any console errors or warnings that might provide insights into the issue.

  By addressing these points, you might identify and resolve the problem with your <picture> tags. If you have specific errors or unexpected behaviors, providing that information would help in giving more precise assistance.

  11

  Marked as helpful