Skip to main content
A
Anonymous
May 12, 2017
Question

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

  • May 12, 2017
  • 1 reply
  • 3219 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Chris_Johnston
Chris_Johnston
Level 6
May 12, 2017

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.

A
Anonymous
May 12, 2017

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
Chris_Johnston
Level 6
May 12, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...