Icons not displaying when AMP is activated

Hello @hashthemes

Thank you for contacting us, We will recommend checking AMP’s Guide for Custom Fonts.

Also, please check other styling rules such as usage of !important qualifiers is not allowed.

You may find chrome extension for AMP validation useful

Additionally, I will recommend using SVG icons instead of fonts icons which can throttle site performance.

Hope this is helps!

Hi,

Its a font icon and did you find any issue with the @font-face CSS in this file https://viral.s1-tastewp.com/wp-content/themes/viral-news/css/materialdesignicons.amp.css

And regarding the usage of !important, the heights attribute in amp-base-carousel is not working without adding !important. Can you please check the carousel on the website https://viral.s1-tastewp.com/?amp=1 and guide me on how to make it work?

Hello @hashthemes

1) Remove !importaant from materialdesignicons.amp.css, somehow the content:"" is gone missing. I tried your font and they are working as expected for me

2) Not sure what’s needed can you please remove the !important attribute and check if sizer works properly here is example

Hi,

Thank you for your quick reply.

1. I tried it in another domain and the same error again. And yes, I can see that the content:”” should have font code but its gone empty and I suppose this CSS is generated by AMP

2. Ok I remove the !important, here is how it looks now. See the carousel here https://viral.s1-tastewp.com/?amp=1 . To be more clear, check this screenshot https://i.imgur.com/DvUJ448.jpeg . The inline style is overwriting the CSS generated by AMP.

and here is the markup

<amp-base-carousel class="amp-slider vn-carousel-block-wrap" layout="responsive" width="1" height="1" heights="(min-width: 1199px) 23%,(min-width: 900px) 31.33%,(min-width: 600px) 48%, 100%" visible-count="(min-width: 1199px) 4,(min-width: 900px) 3,(min-width: 600px) 2, 1" auto-advance="true" auto-advance-interval="3000">

Hello @hashthemes

Social Styling: The CSS seems to be removed by the AMP plugin during CSS tree shaking, this could be the effect of the container CSS or Other CSS that overwrites it.

Carousel : the markup seems all right. Can you please add re-check,

.vn-post-item {
    height: auto;
}

Yes, i added the CSS code but the problem still exists.

And regarding the icon issue, the icons are present in other location like single page, blog page, author name, posted date and other part as well. And CSS for each of those elements are different with different containers..

Please add the following

.vn-carousel-block {
    margin-bottom: 50px;
    display: grid;
    height: 325px;
}

Ok, i have added that CSS but it does not look like a good way to solve this issue because the bottom of the carousel is cut off on various responsive widths.

Is this the AMP js problem or your plugin issue? As I tried to google for such issue but did not find any result in the search result.

As I mentioned before this is not an issue with AMP Plugin or AMP JS (As I checked both on twentytwentyone themes and AMP playground found both works ok )

Your theme CSS might be overwriting/Overlapping the AMP component CSS causing the issue.

I am not a CSS expert but it will be best to consult with CSS expert.

Hi,

Ok, I have also done a test, and here is the result. Check this AMP Playground Code . It works fine if you check by resizing the widnow. The amphtml-sizer works properly when resized. But when i put the same code (Static HTML) , you can check the result here https://viral.s1-tastewp.com/?amp=1 with your AMP plugin activated.

Now check the same carousel code here without your AMP plugin being activated https://viral.s1-tastewp.com/ and then extra AMP script added to the header

<script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

It is working perfect. Isn’t it?

So i hope you realize the issue and pass it to the appropriate developers so that they can dig into it.

Thanks

Hello @hashthemes

I was not able to check the non-AMP version as the site keeps me redirecting to the non-AMP version.

Can you please confirm the issue about the responsive carousel by changing your theme to something default themes like twentytwenty or twentytwentyone

AMP Version: https://viral.s1-tastewp.com/?amp=1
Non AMP Version: https://viral.s1-tastewp.com/ But it has AMP script for carousel as mentioned above.

And both of these URLs are working properly and not redirecting at all. I checked in all browsers.

In the AMP version the carousel JS is generated from your plugin and in the Non AMP version, the script is added for the AMP carousel.

And both version has same HTML markup. You will see a huge gap below the carousel when your AMP plugin is enabled. But the second version is perfect at it should be.

Hello @hashthemes

Can you please try one more thing and remove heights attribute completely

<amp-base-carousel layout="responsive" width="1" height="1" visible-count="(min-width: 1199px) 4,(min-width: 900px) 3,(min-width: 600px) 2, 1" auto-advance="true" auto-advance-interval="3000">