Support » Plugin: AMP » Icons not displaying when AMP is activated

Viewing 15 replies - 1 through 15 (of 30 total)
  • Plugin Support Milind More

    (@milindmore22)

    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!

    Thread Starter HashThemes

    (@hashthemes)

    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?

    Plugin Support Milind More

    (@milindmore22)

    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

    Thread Starter HashThemes

    (@hashthemes)

    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.

    Thread Starter HashThemes

    (@hashthemes)

    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">

    Plugin Support Milind More

    (@milindmore22)

    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;
    }
    Thread Starter HashThemes

    (@hashthemes)

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

    Thread Starter HashThemes

    (@hashthemes)

    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..

    Plugin Support Milind More

    (@milindmore22)

    Please add the following

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

    (@hashthemes)

    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.

    Plugin Support Milind More

    (@milindmore22)

    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.

    Thread Starter HashThemes

    (@hashthemes)

    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

    Plugin Support Milind More

    (@milindmore22)

    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

    Thread Starter HashThemes

    (@hashthemes)

    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.

    Plugin Support Milind More

    (@milindmore22)

    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">

Viewing 15 replies - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.