Media queries in element CSS

[ehsd]

I’m trying to add a media query to a headline element for the XS size in the Pro header builder. I’m trying to add it to the element css, but its not working. Does this need to be added to the page CSS? I’ve tried to place it in the header css as well and same issue.

I need to resize a headline for the XS (small phone) breakpoint.

[iOBAdmin]

Hi @ehsd,

You can apply the media query directly onto the element. Click on the Element > Customise > Element CSS. Then use the media query with the $el to apply the styling to the element and insert your css. For example:

@media (max-width:769px){
  $el {
  width:70% !important;
}
} 

The above sets the width of the element to 70% for anything up to 769px. Anything above then takes on the setting you have set within the main component settings.

I hope this helps!

J

[ehsd]

I guess I forgot the !important statement. I try to minimize using !important as much as possible. Working now. Thanks!