Support » Plugin: AMP » Menu Font Sizes are broken with AMP

  • The amp-custom.css is doing strange things to my menus font sizes with the Neve Pro Theme and AMP in default mode – see for yourself: [ redundant link removed ]

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Kai Spriestersbach

    (@seokai)

    I cannot get it right, even with custom css via Customizer :-/

    Plugin Support James Osborne

    (@jamesosborne)

    It looks like the issue is only applying to menu items without sub menus. Here’s what I’m seeing:

    .builder-item--primary-menu .primary-menu-ul>li>a {
        font-size: 1.5em;
    }

    For menu items with sub menus the below applys:

    @media (min-width: 960px){
    .builder-item--primary-menu {
        font-size: 1.2em;
    }}

    As you’re using standard mode AMP it’s difficult to determine the source. Have you applied the 1.5em rule yourself? I’ll check the Never regular theme for anything I can find.

    Thread Starter Kai Spriestersbach

    (@seokai)

    it’s difficult to determine the source

    exactly, that is my problem πŸ˜€

    I try to find the rule…

    is there a way to debug the generated amp-custom.css in order to see what rule comes from what file or origin?

    Plugin Support James Osborne

    (@jamesosborne)

    Is it possible that you can temporarily switch to transitional mode so we can check the rules in your non AMP?

    is there a way to debug the generated amp-custom.css in order to see what rule comes from what file or origin?

    Good question, @westonruter may be able to point you in the right direction.

    Thread Starter Kai Spriestersbach

    (@seokai)

    Oh yes I found it! It was in the critical css!

    An amp generated css debugger would be really helpful πŸ˜‰

    Plugin Support James Osborne

    (@jamesosborne)

    Nice troubleshooting, thanks for the update.

    You’ll also find a good article here which includes stylesheet prioritization. This will hopefully help you determine any additional rules which may be overwritten.

    Plugin Author Weston Ruter

    (@westonruter)

    is there a way to debug the generated amp-custom.css in order to see what rule comes from what file or origin?

    An amp generated css debugger would be really helpful

    In fact, yes! This is already available. If you click Validate URL under the AMP toolbar menu on an AMP page, the resulting Validated URL screen will have a section for Stylesheets. Each of the stylesheets on the page are then listed there. You can expand each to show its contents, before and after tree shaking.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Menu Font Sizes are broken with AMP’ is closed to new replies.