Icons not displaying when AMP is activated

Yes, i have removed and is working as expected in both AMP and non AMP versions. But this is not what I am looking for. I am looking to make the heights attribute work which does not seem to work with your AMP plugin. So removing height does not make any sense. However I have removed it if you want to check.

I will recommend adjusting the heights attribute instead of percentage please try actual values in pixels

heights="(min-width: 1199px) 300px,(min-width: 900px) 400px,(min-width: 600px) 500px, 100%"

adjust 300px, 400px, 500px as by checking it on responsive layout tool

Edit: Removing the heights attribute switches to auto responsive values.

• This reply was modified 2 years, 9 months ago by Milind More.

Hi,

I have added the code but the issue is not solved. The Carousel Resizer is working fine in the custom AMP version but not working in your AMP plugin. I have added the code and you can check

Custom AMP Script : https://viral.s1-tastewp.com/
With AMP plugin : https://viral.s1-tastewp.com/?amp=1

@hashthemes

Can you please verify you can reproduce it on other themes and when you are not adding any custom CSS?

In order to create an issue/ticket, we need to reproduce the issue using some default environment ie. Only the AMP plugin is active, Default themes such as Twenty Twenty are being used and no custom CSS is being added.

I am not able to reproduce the issue on the default environment, so it is your theme/setup-specific issue and not AMP plugin-specific issue.

Custom AMP Script: https://amp-support.rt.gw/hi/amp-client-code-base-carousel/
With AMP plugin: https://amp-support.rt.gw/hi/amp-client-code-base-carousel/?amp=1

• This reply was modified 2 years, 9 months ago by Milind More.

@hashthemes

Additionally please try version 1.0 scripts so instead of

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

Use the following

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

Both your demo website are not displaying any carousels here
Custom AMP Script: https://amp-support.rt.gw/hi/amp-client-code-base-carousel/
With AMP plugin: https://amp-support.rt.gw/hi/amp-client-code-base-carousel/?amp=1

And adding the below script caused the same issue with my demo website as well. Check the Console for errors.
<script async custom-element=”amp-base-carousel” src=”https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js”></script&gt;

Ok for the final time, I am going to set the demo with the default twenty theme. And for your information, the current demo does not have any CSS that affect the carousel.

Ok here is the new setup with Twenty Twenty One theme active and only with the AMP plugin active. And it has the same issue.

Non Amp Version: https://hashcreation.com/
AMP version: https://hashcreation.com/?amp=1

And please close this thread as unsolved if you can not help to fix it or better forward it to a suitable person. Or i am no more interested in it and look forward to another plugin.

@hashthemes

Thank you for reproducing it, I will be creating a GitHub issue for the same

Thank you. I hope this issue would be resolved soon as I am looking to make all of my theme AMP compatible which in turn will be beneficial for you as well.

And in the meantime, I am looking to add the AMP badge when searched from the dashboard. I saw a form here https://amp-wp.org/ecosystem/ and submitted it with the necessary information but did not get any response till now. It is more than a week already.

Hello @hashthemes

Yes, the form is correct, We will review all the submissions every 15 days so it may need some time, once your submission is reviewed we will reply to you.

in the meantime try testing your themes using the AMP page Experience tool

• This reply was modified 2 years, 9 months ago by Milind More.

@hashthemes

I did a fresh install of your theme adjusted to removed important from heights attribute

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

and added the following CSS in style-amp.css

amp-base-carousel{
    height: 275px;
}

It’s working for me, without issues, also I didn’t see disappearing icons

Demo Seems good on all devices : https://amp-support.rt.gw/?amp=1

• This reply was modified 2 years, 9 months ago by Milind More.
• This reply was modified 2 years, 9 months ago by Milind More.

The technique you mentioned is not a good way and it restricts the responsive behavior of the AMP carousel to control the height of the carousel image and different resolutions.

I had it tried already.. Also previously I added the !important to make it work which was again not a good way.

@hashthemes

Yup, trying to provide a temporary solution until it gets fixed.

@hashthemes I have created a GitHub issue, you can subscribe to it to get future updates

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