Search code examples
cssmedia-queries

How to use @media to change width of iframe or div between specific screen sizes(min-width & max-width)

For my site on cruiseguru.co.th, the search box on the left overlaps with page content when screen size is between width 1200px and 765px so I was hoping to change width of the search box only on between two resolution with a css like the one below but of course it doesn't work so it would be great if anyone can advise me the right css.

@media screen (max-width:1200px) and (min-width:765px) {
#IFRAME_2 {
    max-width: 360px;
};
Solution

  • You're missing and between screen and (max-width:1200px)

    #IFRAME_2 {
  width: 600px;
}
@media screen and (max-width:1200px) and (min-width:765px) {
  #IFRAME_2 {
    width: 360px;
  }
}
    <iframe id="IFRAME_2"></iframe>