CODEWITHSUNDEEP
amp-html
Vishakha Nehe
Vishakha Nehe

Reputation: 37

In AMP pages default css of the components is not working

My HTML file code is :

 <!DOCTYPE html>
    <html ⚡="">
    <head>
      <meta charset="utf-8">
      <title>Amp</title>
      <link rel="canonical" href="">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      <script async="" src="https://cdn.ampproject.org/v0.js"></script>
      <style amp-boilerplate=""></style>
      <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp- 
                     carousel-0.1.js" async=""></script>
      <style amp-custom=""></style>
    </head>
    <body> 
      <header class="ampstart-headerbar">
             Amp pages
      </header>
    </body>
    </html>

When I open this file in my browser then style for header does not inject. In AMP pages If I want to give the custom style then I need to give this in the internal style with amp-custom attribute but why AMP component style is not injecting? I am unable to understand what library is missing in this code? I am exploring AMP first time. If there are some more suggestions which I need to take care then please do let me know.

Upvotes: 0

Views: 1464

Answers (1)

user9857025
user9857025

Reputation:

This is the way amp-custom need to be defined.

Try adding the CSS from the below file from the line 39 - 41. That should fix the issue. https://github.com/saichandu415/AMP-Ecommerce-Apsara/blob/master/Website/templates/landing.amp.html

<!doctype html>
  <head>
            <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>  
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
  </head>

Check this below link for more detailed information

https://www.ampproject.org/docs/design/responsive_amp

Let us know if this helped. Thanks!

Upvotes: 1

Related Questions