News letter Sign up with success message

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Hey great solution! although it seems that you have reversed the places of the image and the text for desktop screens. You can fix this easily, you just have to add the order: inherit property to your picture (so it stays in place on mobile screens). And also add order: 1 to your media query so that it changes places on desktop screens. More info:

  @media screen and (min-width: 800px){
    picture {
      order: 1;
    }
  }
  

  Marked as helpful

  0

  ---

  

  raya•2,870

  @rayaattaPosted 11 months ago

  I'm really happy for your feedback I have improved my code and can I get a bit of advice,using the picture tag has always given me issues should I stick with it or should I stick to using media queries for image swapping@Blackpachamame

  0

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  @rayaatta It may be a problem that you have a media query with a min-width: 500px and in the picture you declare it with media="(min-width:800px)". They should be both 500px or both 800px. The order thing, if you add it with the correct media queries then it would only affect the position of the image.

  0

  

  raya•2,870

  @rayaattaPosted 11 months ago

  Thanks,I had made it 500 because my laptop was off so I used the phone and adjust Ed the media query. Thanks@Blackpachamame

  0

  

  raya•2,870

  @rayaattaPosted 11 months ago

  Thanks,I had made it 500 because my laptop was off so I used the phone and adjust Ed the media query. Thanks@Blackpachamame

  0

  

  raya•2,870

  @rayaattaPosted 11 months ago

  Thanks,I had made it 500 because my laptop was off so I used the phone and adjust Ed the media query. Thanks@Blackpachamame

  0