Media Query works in Cornerstone but not on Website

[NicoCollu]

Hey there,

Working on targeting text boxes to be a specific height only after a minimum browser-width.
It works when the code is in Cornerstone but doesn’t reflect on the site.

How do I fix this?

This is the code:
@media only screen and
(min-width: 769px) {
.kfboxes {height:270px;}
}

This is what it looks like in the Cornerstone:

This is what it looks like on the actual website:

[Prasant]

Hello Nico,

Thanks for reaching out.

You can also try using following code and see how it goes:

@media only screen and
(min-width: 769px) {
.kfboxes {height:270px;}
}

In case problem is still there, then please clear site and browser cache. In case changes are still not reflecting, please share the page url wherein you can added the kfboxes class for us to take a closer look.

Thanks.

[NicoCollu]

Hello Prasant,

I’m not exactly sure what the difference is between your code suggestion and mine? Are they not identical?

It still isn’t working - here is the site: https://devwp.guardianbackgroundsoftware.com/

Thank you!

[jade]

Hello Nico.

The code you were trying initially should work. Perhaps there is an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

If there is not issue with the CSS but the code is still not working, please provide us with the admin access to your site in a Secure Note:

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

[NicoCollu]

Hi there,

The CSS seems to be fine.

[jade]

Hello Nico,

Please update the code from:

@media only screen and
  (min-width: 769px) {
.kfboxes {height:270px;}
}

to

@media only screen and (min-width: 769px) {
    .kfboxes {height:270px;}
}

Hope this helps.

[NicoCollu]

@Jade

@media only screen and (min-width: 769px) {
.kfboxes {height:270px;}
}

Hey there,

That doesn’t work unfortunately. What other suggestions do you have?

[jade]

Hello Nico,

I have just tried the code in on the homepage’s CSS area and it seems to work fine.

Please double check.

[NicoCollu]

@Jade

@media only screen and (min-width: 769px) {
.kfboxes {height:270px;}
}

Hey Jade,

That’s very awkward, I copied it directly and it didn’t work, but trying to re-copy it today, it works. Maybe it was a cache issue this time.

Sorry about that and thanks for the help!

[thai]

Glad to hear it’s working now.