How do I combine this media query with a specific id

1 Views

I’m trying to display a 100% width iframe on my WordPress site with an existing media query and I’m trying to figure out if I can target the iframe id to be unaffected by the original media query or combine it with a unique media query to get the full frame effect with the iframe only.

This is the original code

Read More
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
    }
}

and this is how I need it to function, but only with id tag #frame 

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 100%!important;
        max-width: 100%!important;
    }
}

I feel like this is a few seconds from complete, but I’m not sure how to finish it.

Post Views: 1

Related posts

2 comments

  1. Your questions is not very clear. Then if your unique iframe ID is #frame, you can target it:

    @media only screen and (max-width: 767px) {
    /* your iframe */
    .responsive #frame { 
        width: 100%!important;
        max-width: 100%!important;
    }
}

    You can add more rules and you can target other selectors inside this media query too…

  2. You missed a } at the end, as well as you can tag multiple elements onto CSS declarations, so you could do this if you wanted the #frame element to have the same properties, so your current code looks like this:-

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 100%!important;
    max-width: 100%!important;
  }
} // <-- Notice the ending bracket that you missed off, I added that.

    Then you could tag on another element with a , like so:-

      @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container, #iframe { // <-- see the , and the element?
    width: 100%!important;
    max-width: 100%!important;
  }
} // <-- Notice the ending bracket that you missed off, I added that.

    I know this is long winded, but I tried to go in depth rather than just giving you the example so you fully understood, hope I helped 🙂

Comments are closed.