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

Anonymous
Not applicable

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

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.

5 REPLIES 5
Chris_Johnston
Level 8

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

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
Not applicable

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

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
Level 8

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

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
Not applicable

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

Thanks, Chris!

I figured it out and it's working now.

Anonymous
Not applicable

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

Olga, how did you get this to work?