Docs

[Rad]

Hi there,

Which is why you need to determine the scope of your @media query. Example,

@media ( max-width: 767px ) {
/* Everything within this bracket will be applied to the device width equal or less than 767px.
}
/* Everything outside this bracket will be applied to all devices

Now, this what happens.

@media ( max-width: 767px ) {
/* Everything within this bracket will be applied to the device width equal or less than 767px.

/* Since there is no close bracket, Everything will be applied to the device width equal or less than 767px

Now, what I can’t answer is what’s the scope of your media query. What CSS is supposed to be applied to all devices, or specific devices?

Let’s do some Q/A, this is the original CSS.

@media (min-width: 767px) and (max-width: 930px) {
    .home #x-section-2 .x-btn {
        font-size: 1em !important;
    }
.custom-icon-info { background:url(http://www.siua.it/wp-content/uploads/2016/01/circle-info-uffici.jpg) 0 0 no-repeat;
      width:32px;
      height:32px;
      display:inline-block;
}
.responsive-heading {
    line-height: 1.50em;
}
.x-topbar .p-info {
font-size: 0.90em;
}

Should the .custom-icon-info belong to @media (min-width: 767px) and (max-width: 930px)? If yes, then the close bracket should be added after it.

@media (min-width: 767px) and (max-width: 930px) {
    .home #x-section-2 .x-btn {
        font-size: 1em !important;
    }
.custom-icon-info { background:url(http://www.siua.it/wp-content/uploads/2016/01/circle-info-uffici.jpg) 0 0 no-repeat;
      width:32px;
      height:32px;
      display:inline-block;
}
}

Should the .responsive-heading belong to @media (min-width: 767px) and (max-width: 930px)? If yes, then the close bracket should be added after it.

@media (min-width: 767px) and (max-width: 930px) {
    .home #x-section-2 .x-btn {
        font-size: 1em !important;
    }
.custom-icon-info { background:url(http://www.siua.it/wp-content/uploads/2016/01/circle-info-uffici.jpg) 0 0 no-repeat;
      width:32px;
      height:32px;
      display:inline-block;
}
.responsive-heading {
    line-height: 1.50em;
}
}

Should the .x-topbar .p-info belong to @media (min-width: 767px) and (max-width: 930px)? If yes, then the close bracket should be added after it.

@media (min-width: 767px) and (max-width: 930px) {
    .home #x-section-2 .x-btn {
        font-size: 1em !important;
    }
.custom-icon-info { background:url(http://www.siua.it/wp-content/uploads/2016/01/circle-info-uffici.jpg) 0 0 no-repeat;
      width:32px;
      height:32px;
      display:inline-block;
}
.responsive-heading {
    line-height: 1.50em;
}
.x-topbar .p-info {
font-size: 0.90em;
}

And so on until you reach the last CSS. I’m not really sure the scope since you added more CSS after the @media block without closing it. You should always keep an eye on this practice, it can break your entire design if you see it late.

Thanks!

[contegi66]

Dear Support,

Thank you very much for the detailed reply. I will carefully follow your advice and check consistency.

Have a nice weekend

Gianni

[Joao]

Hi Gianni,

Let us know if you need further assistance.

And have a great weekend as well!

Joao

[Author]

Posts