Docs

[zachsergeant]

So I’ve put some custom CSS on a post page that i have, and it shows and works perfectly when im looking at it in cornerstone. I want the page to be 50% width on laptops and desktop screens, and full width on smart phones.

url: http://www.basscave.com/how-to-make-metro-boomin-808s/
wp version: 4.7.2
cornerstone version: 1.3.3
x version: 4.6.4

Here is the code:

@media only screen
and (min-width : 769px) {
.x-container.max.width.offset {
width: 50%
}}

@media only screen
and (max-width: 767px) {
.x-container.max.width.offset {
max-width: 100%;
}
}

again, it works perfectly when im looking at it in cornerstone, but when i go to my actual site, EVERYTHING is full width as if the media queries dont actually work, even thought they do when viewing from cornerstone.

the weirdest part is that there are other things im doing in the custom css that DO work when viewing in Cornerstone AND when i go the actual site, but this media query stuf ONLY works when viewing in Cornerstone..???

[Christopher]

Hi there,

Please update your code to :

@media only screen
and (min-width : 769px) {
.x-container.max.width {
width: 50%
}}

@media only screen
and (max-width: 767px) {
.x-container.max.width {
max-width: 100%;
}
}

Hope it helps.

[zachsergeant]

that did the trick, thanks a lot!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts