search

apsilao / Picture-This

Starter files for the MTM6201 - Web Dev II - Picture This assignment
0 stars 0 forks source link

Conflicting viewport and images concern #2

Open apsilao opened 1 month ago

apsilao commented 1 month ago

Hi Prof Wendy ,

Based on what I have so far there is a conflict in 960px viewport , I also have errors in validation for the same image size. Can you point me to the right direction pls?

` 

  <source srcset="images/museum-800_x_800.jpg,
                  images/museum-1600_x_1600.jpg 2x,
                  images/museum-2400_x_2400.jpg 3x" 
                  media="(min-width: 1600px)" />

  <source srcset="images/museum-640_x_640.jpg,
                  images/museum-1280_x_1280.jpg 2x,
                  images/museum-1920_x_1920.jpg 3x" 
                  media="(min-width: 1280px)" />

  <source srcset="images/museum-480_x_480.jpg,
                  images/museum-960_x_960.jpg 2x,
                  images/museum-1440_x_1440.jpg, 3x" 
                  media="(min-width: 960px)" />

  <!-- Landscape - viewports smaller than 960px -->
  <!-- conflicting viewport for 960px -->

  <source srcset="images/museum-320_x_180.jpg,
                  images/museum-640_x_360.jpg, 2x,
                  images/museum-960_x_540.jpg, 3x" 
                  media="(min-width: 960px)" />

  <!-- this is for the 720 to 958 view port -->
  <source srcset="images/museum-720_x_405.jpg,
                  images/museum-1440_x_810.jpg 2x,
                  images/museum-2160_x_1215.jpg 3x" 
                  media="(min-width: 720px)" />

  <!-- this is for the 480 to 719 view port -->
  <source srcset="images/museum-480_x_270.jpg,
                  images/museum-960_x_540.jpg 2x,
                  images/museum-1440_x_810.jpg 3x" 
                  media="(min-width: 480px)" />

  <!-- this is for the 320px to 479 view port -->
  <source srcset="images/museum-720_x_405.jpg,
                  images/museum-1440_x_810.jpg 2x,
                  images/museum-2160_x_1215.jpg, 3x" 
                  media="(min-width: 320px)" />

  <!-- added this for viewport lower than 320 -use max width as per tips in the lesson-->
  <source srcset="images/museum-320_x_180.jpg,
                  images/museum-640_x_360.jpg 2x,
                  images/museum-960_x_540.jpg 3x" 
                  media="(max-width: 319px)" />

  <!-- bdefault ackup Image -->
  <img src="images/museum-960_x_540.jpg"
    alt="This image shows an art gallery room with numerous paintings hung on the walls. ">

</picture>`

I have this error for the repeating images when validating the html: image

@wendywarren

wendywarren commented 1 month ago

Hi @apsilao,

I think it might be the placement of the comma.

You'll notice in the following code that the , comes before the 3x but there shouldn't be a comma at all on that line.

 <!-- this is for the 320px to 479 view port -->
  <source srcset="images/museum-720_x_405.jpg,
                  images/museum-1440_x_810.jpg 2x,
                  images/museum-2160_x_1215.jpg, 3x" 
                  media="(min-width: 320px)" />