Broken layout and the tag is filled with CSS rules

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

    (@milindmore22)

    8 months, 2 weeks ago

    Hello @garrigan

    Thank you for reaching out to us, from the description we understood that you have two issues

    1) A warning in error logs that is_amp_endpoint() functions is deprecated, and instead you should use amp_is_request() also the function is used early, and it should be used on or after wp hook please reach out to otter-blocks plugin.

    2) Regarding the Broken CSS, AMP is built on the AMP framework and which follows strict rules and restrictions to create per formant AMP pages. For performance and usability reasons, AMP limits some CSS styles and total bytes to 75Kb per page. The AMP plugin combines CSS from all plugins and themes and removes unnecessary CSS to reduce the size to 75Kb.

    Check your CSS budget because the AMP framework only allows 75 KB CSS on each page, so AMP WordPress plugins limit the CSS to create valid AMP pages, but some third-party plugins and themes on some occasions exceed the CSS budget.

    So to find those plugins or theme, you have to find those plugins and themes and using AMP development tool.

    If you are not sure how to find exceeding CSS budget, follow the below steps:

    1) Make sure you have enabled the AMP validation tool
    Go-to: Users > Profile > check the checkbox for AMP Development tool > save

    2) Visit AMP page exceeding CSS budget check Admin bar for AMP option locate submenu CSS budget and click on it (screenshot)

    3) Locate the source of excessive CSS (screenshot)

    4) If one of the plugins adds excessive CSS, find an alternative plugin from the AMP ecosystem

    5) If your theme is exceeding the CSS budget, switch to reader mode and choose a different AMP theme for reader mode, learn more about the Reader mode video below:

    We hope this helps!

    • This reply was modified 8 months, 2 weeks ago by Milind More.
    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    Item #1: The vendor has created a “development fix” for the deprecation issue. https://github.com/Codeinwp/otter-blocks/issues/2601

    Item #2: The issue is not caused by the “CSS budget”. The AMP symbol is green both before and after the WordPress upgrade. The image shows the AMP status “green” after upgrading WordPress. https://www.garrigan.nyc/images/wordpress_issue_2024-12-03.jpg

    As described above:

    WordPress version 6.6.2 is the last version of WordPress in which my pages function properly with AMP.

    After I upgrade WordPress, the formatting of the pages “break” as illustrated in the image file. https://www.garrigan.nyc/images/wordpress_issue_2024-12-03.jpg

    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    Plugin Support Milind More

    (@milindmore22)

    8 months, 2 weeks ago

    Hello @garrigan

    Can you please follow the steps mentioned in my previous reply and share a screenshot of AMP DevTools similar as step 3

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    I will do so.

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    For simplicity, I am only looking at the home page from the staging site. The images are from the “broken” state, after WordPress was upgraded from version 6.6.2

    https://www.garrigan.nyc/images/screenshot-2025-06-18-at-11-54-54-amp-validated-url-—-wordpress.png

    https://www.garrigan.nyc/images/image-1.png

    https://www.garrigan.nyc/images/image-2.png

    Apologies, if I misunderstood your instructions, I am not a developer.

    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    Plugin Support Milind More

    (@milindmore22)

    8 months, 2 weeks ago

    Hello @garrigan,

    Thank you for sharing the screenshots. I can confirm that the CSS budget is not exceeding 100%.

    We believe the issue might stem from the optimization plugins you’re currently using. Upon reviewing the source code of your non-AMP pages, we observed some empty CSS tags being served. screenshot

    The AMP plugin performs all necessary optimizations by default, making additional optimization plugins redundant on AMP pages.

    Please configure your page optimization plugins (which handle CSS, HTML, and JavaScript optimization) to suppress their effects specifically on AMP pages. This allows them to continue optimizing your non-AMP pages without interference.

    For detailed instructions on plugin suppression, please refer to the guide on our website.

    Here are the steps:

    Suppress Optimization Plugins for AMP Pages

    Follow these steps to suppress optimization plugins that may be interfering with your AMP pages:

    1. Navigate to AMP in your WordPress dashboard.
    2. Go to Settings.
    3. Click on Plugin Suppression.
    4. Locate the optimization plugins in the list (these are typically plugins that handle CSS, HTML, or JavaScript optimization).
    5. For each relevant optimization plugin, click the dropdown menu next to its name and select Suppress.
    6. Click Save Changes.
    7. Re-check your broken AMP page to see if the issue is resolved.

    Or see plugin suppression in action in YouTube video at exact 3:00 minutes

    We hope this helps!

    • This reply was modified 8 months, 2 weeks ago by Milind More.
    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    Hi,

    Staging/development site: You have no suppressible plugins active.

    https://www.garrigan.nyc/images/screenshot-2025-06-19-at-08-38-07-amp-settings-staging.garriganenterprises.com-wordpress.png

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    Active Plugins

    AMP Version 2.5.5 by AMP Project Contributors
    Image optimization service by Optimole Version 4.0.3 by Optimole
    Neve Pro Addon Version 3.1.1 by ThemeIsle
    Otter – Page Builder Blocks & Extensions for Gutenberg Version 3.0.12 by ThemeIsle
    Pirate Parrot Version 1.3.0 by Themeisle
    Starter Sites & Templates by Neve Version 1.2.22 by Themeisle (Latest version: 1.2.23)

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    For testing, the staging/development site was created with only a portion of the plugins that exist in the production instance.

    Inactive Plugins

    Akismet Anti-spam: Spam Protection Version 5.4 by Automattic – Anti-spam Team
    AMP Enhancer Version 1.0.49 by ampenhancer
    AMP Wordfence Compat Version 0.2 by Weston Ruter, Google
    Hello Dolly Version 1.7.2 by Matt Mullenweg
    Hyve Lite Version 1.2.4 by ThemeIsle
    Phoenix Media Rename Version 3.12.9 by crossi72
    WordPress Importer Version 0.8.4 by wordpressdotorg
    Yoast Duplicate Post Version 4.5 by Enrico Battocchi & Team Yoast

    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    Hi,

    If you require additional information, I will provide it. As I mentioned previously, the staging/development site contains a low quantity of active plugins. The problem does exist within the test environment.

    The production environment is using WordPress version 6.6.2 and thus is not affected.

    If you request access to the staging/development site, we will need to schedule it because the site exists within VMware workstation on a desktop computer. We will also need a method for sharing the user account and password.

    Plugin Support Milind More

    (@milindmore22)

    8 months, 2 weeks ago

    Hello @garrigan,

    1) On the staging site, the AMP plugin should display active plugins that can be suppressed, unless they are must-use (mu-plugins). I’m not sure why the AMP plugin isn’t detecting them as it usually does. Please try disabling optimizations from third-party plugins or themes to see if that resolves the issue on your staging site.

    2) I tested all the plugins you mentioned on my demo site and did not encounter any issues with the CSS budget or broken CSS. Upon checking your staging site, I don’t see any broken CSS issues there either. Have you been able to resolve the problems?

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    Hi,

    1. As stated above and shown by the image, You have no suppressible plugins active.
    2. I do not know which site you checked because the staging/development site [staging.garriganenterprises.com] is not accessible. It is rarely powered-on. The issues as stated and illustrated by an image, still exist.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    • This reply was modified 8 months, 2 weeks ago by Jim Garrigan.
    Plugin Support Milind More

    (@milindmore22)

    8 months, 2 weeks ago

    2) I was checking this website with staginga as subdomain which I picked up from site health info you posted in GitHub issue

    • This reply was modified 8 months, 2 weeks ago by Milind More.
    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    I will power-on the staging/development site. It will be available at the top of the hour.

    Thread Starter Jim Garrigan

    (@garrigan)

    8 months, 2 weeks ago

    The site is live. https://staging.garriganenterprises.com/?amp=1

Viewing 15 replies - 1 through 15 (of 23 total)
1 2

The topic ‘Broken layout and the tag is filled with CSS rules’ is closed to new replies.