Hide element in AMP “Transitional” mode

  • Resolved opeedo

    (@opeedo)


    3 years, 1 month ago

    I just created a banner on my default website unfortunately the banner is displaying in the AMP version of my site because I use traditional mode to serve AMP.
    Here is the code 

    <style amp-custom>
#fixedbanner{display:none}
<style>

    Please how do I hide the banner on AMP pages transitional mode

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

  • Hi @opeedo,

    Thanks for contacting us. Using the plugin in Transitional mode, you’re using your active WordPress themes stylesheets and templates. There is no need to add an amp-custom style tag in this case.

    Any CSS changes made to your theme via your style.css file, the WordPress customizer, or other methods also apply to your AMP URLs.

    You just need to add a selector exclusive for the AMP version:

    html[amp] #fixedbanner{display:none}

    Thread Starter opeedo

    (@opeedo)

    Thank you for your swift response please help me break this down in layman terms.

    Here is my code `<div id=’fixedbanner’ style=’position: fixed;left: 0;bottom: 0;width:100%;text-align: center;transition: all .1s ease-in;z-index:999;-webkit-transform:translateZ(0);’>
    <div>`

    When I used <style amp-custom>
    #fixedbanner{display:none}
    <style> to hide it on AMP it became hidden on Non-AMP.

    Can you just help me write the code I need to use to hide it on the AMP?

    Hi @opeedo,

    you should not add ‘<style amp-custom>’, as I mention you just include on your normal CSS a rule with the selector “html[amp]”. Have you tried to add on your style.css the following code:

    html[amp] #fixedbanner{display:none}

    As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hide element in AMP “Transitional” mode’ is closed to new replies.