Adding media queries to CSS stylesheet in Custom Head HTML (Page Meta Tags)

[Anonymous]

I wonder if it makes sense to have media queries in the Custom Head HTML of a landing page? I tried adding  them but it seems that Marketo doesn't apply them.

[Chris_Johnston]

It is proper to have them in head wrapped in style tags. If you take a screen grab, someone should be able to help troubleshoot it for you.

[Anonymous]

Yes, sure, here is a sample of the CSS stylesheet I put in the Custom Head:

<style>

h2, h3 {
     color: #002b7f;
     font-weight: bold;
     letter-spacing: .01em;
  line-height: 1.4
  font-family: 'Lato', Helvetica, Arial, sans-serif;
   }

h2 {
     font-size: 18px;
   }

h3 {
     font-size: 14px;
   }

}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {

   h2 {

     font-size: 24px; !important;

   }

h3 {

     font-size: 22px; !important;

   }
  
   }
 

</style>

The font size of h2 and h3 elements doesn't increase on the responsive version of the page.

[Chris_Johnston]

There is nothing wrong with that code. We just put it on one of our test landing pages and it worked as expected, increasing the font size as the window size shrank.

It must be where you have placed it or you have some code overriding it.

*** It didn't work in Internet Explorer. Chrome and Firefox worked fine

[Anonymous]

Thanks, Chris!

I figured it out and it's working now.

[Anonymous]

Olga, how did you get this to work?