CSS command not running in media query-CodePudding

I know this may have already duplicated, but I tried many of the solutions on the internet and still doesn't work. I have two pictures that wishes to appear in different screen sizes. However, the CSS command picture for smaller screen (767px and below) does not seem to work.

I would be so grateful if you could help out a newbie here. Thank you.

        @media only screen and (min-width: 768px) {
            img{
                border-top-left-radius: 30px;
                border-bottom-left-radius: 30px;
            }
        }

        @media only screen and (max-width: 767px) {
            #loginPicXs{
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
            }
        }

                <div >
                    <picture>
                        <source media="(max-width: 767px)" id="loginPicXs" srcset="loginformpic_sm_xs.jpg">
                        <img src="loginformpic.jpg" >
                    </picture>
                </div>

CodePudding user response：

You need to use the attribute srcset when using the <source>-element. It's usage is for using different images for different viewports, where the images can keep their intrinsic height & width-values to e.g. avoid cumulative layout shifts.

Although the <source>-element shouldn't really be used with only one image in the srcset-attribute, you can keep your HTML markup by just using srcset instead of src:

@media only screen and (min-width: 768px) {
  img {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .img-responsive {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

<picture>
  <source 
    srcset="https://picsum.photos/200"
    media="(max-width: 767px)"
  />
  <img 
    src="https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092__480.png"
  />
</picture>

CodePudding user response：

I think the easiest solution here would be the following:

<div >
   <picture>
      <img src="loginformpic_sm_xs.jpg" id="loginPicXs" >
      <img src="loginformpic.jpg" >
   </picture>
</div>

This makes both images swap at the breakpoint of 768px

@media screen and (min-width:768px) {
   /*your container*/ img:nth-child(1) {
      display:none;   
   }
}
@media screen and (max-width:768px) {
   /*your container*/ img:nth-child(2) {
      display:none;
   }
}

CodePudding user response：

According to HTML spec, picture can only contain one img element. Though you can hide one, but it is not advisable.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

You need to use two img elements: one for desktop and one for mobile.

Hide the mobile version when viewport width is more than 768px and hide the desktop version when viewport width is less than 768px.

@media only screen and (min-width: 768px) {
  #pc-image {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  #mobile-image {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  #pc-image {
    display: none
  }
  #mobile-image {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

<div >
  <img src="loginformpic.jpg"  id="pc-image">
  <img src="loginformpic_sm_xs.jpg"  id="mobile-image">
</div>

You may use figure instead of div.

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

<figure >
  <img src="loginformpic.jpg" >
  <img src="loginformpic_sm_xs.jpg" >
</figure>

figure {
  margin: 0
}

@media only screen and (min-width: 768px) {
  img:last-child {
    display: none;
  }
  img:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}

@media only screen and (max-width: 767px) {
  img:first-child {
    display: none
  }
  img:last-child {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}