Problem with media queries

Submitted by David Anderson on Thu, 2021-01-21 22:19

I am trying to use the four media queries shown below to change the size of an iframe containing a video but it's not quite working as expected. Only the smallest and the largest size options are being displayed. Why are the other two settings being ignored?

@media screen and (max-width: 767px) {
    iframe {
        width: 410px !important;
        height: 231px !important;
    }
}
@media screen and (min-width: 767) and (max-width: 800px) {
    iframe {
        width: 550px !important;
        height: 310px !important;
    }
}

How do I move column 2 above column 1

Submitted by Tojo on Fri, 2014-11-14 00:07

If I have two columns how do put column 2 above column 1 when I reduce the viewport and use media queries.

The default is to put column 1 above column 2 but I want the other way around.

Can somebody tell me what I have to do.

//Tony

Working with media queries

Submitted by Web NZ on Wed, 2014-10-29 05:46

Hi All,

I’m working on a site for my holiday house and I want the layout to be mobile device friendly. So I have been working with media queries but to date I have had no success getting them to do my bidding (my site remains stubbornly laptop and PC centric).

I did wonder if I needed to use

’s to wrap the content or more likely I just don’t know what I’m doing. The site is (www.loftnz.com-only homepage and images up and working so far) Here’s my CSS which is in a separate linked file. Any advice/help gratefully accepted.

@media only screen and (max-device-width:750px) {

Syndicate content