How to add custom css for amp pages?

  • Resolved biznext

    (@biznext)


    3 years, 3 months ago

    Hi,

    I am using transactional mode with GeneratePress theme.

    I want to know how can I add custom css for amp pages?

    I used the next code, but the css didn’t show.
    Other code I added with this function (like analytics and more – yes shown on the site)

    function add_to_body_amp() { 
if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
?>
<style>amp-ad[type=adsense], amp-ad[type=doubleclick] {max-width: 100vw;}</style>
<?php
}
}
add_action('wp_body_open', 'add_to_body_amp');

    So is there another option to add custom CSS code?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @biznext,

    Thanks for contacting us, if you are using the plugin in Transitional mode, you’re using your active WordPress themes stylesheets and templates. Any CSS changes made to your theme, via your style.css file, the WordPress customizer or any other methods also apply to your AMP URLs.

    If you’re looking to apply CSS rules only to your AMP URLs when using transitional mode, you can use the [amp] selector. Any example is below:

    html[amp] amp-ad[type=adsense], 
html[amp] amp-ad[type=doubleclick] {
 max-width: 100vw; 
}

    Please let me know if the suggestion works.

    @biznext As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add custom css for amp pages?’ is closed to new replies.

Tags