AMP removes leading margin

  • Resolved Pawel Slabiak

    (@pawelslabiak)


    4 years, 2 months ago

    AMP plugin (The official AMP plugin for WordPress) strips CSS from the icon, resulting in zero margin between icon and link text.

    I’m not able to share the site, but this is probably easy to reproduce with the AMP plugin. (The site is running the Twenty Twenty theme.)

    With AMP deactivated, the CSS lines responsible for the space between the link text and the icon, which appears to the right of the link, load correctly:

    .wpel-icon-right i.wpel-icon {
    margin-left: .3em;
}

    When AMP is active, howwever, it removes all of wpel.css stylesheet during tree-shaking.

    Reintroducing the CSS in the customizer and the child-theme stylesheet have no effect, even though the classes ‘wpel-icon-right’ and ‘wpel-icon’ remain in the page source.

    Any workaround ideas would be appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)

  • @pawelslabiak when a plugin overrides css there is not much we can do… I bet that AMP is adding !important to margin-left for i HTML element. The only solution is to make sure that you can define again a margin-left after the AMP css.

    Thread Starter Pawel Slabiak

    (@pawelslabiak)

    As noted in the original post, reintroducing the CSS in the customizer or the child-theme stylesheet has no effect, despite the css targeting the classes that remain associated with the element after tree shaking.

    Again, any ideas about a workaround would be appreciated.

    @pawelslabiak as I said in my previous comment, “The only solution is to make sure that you can define again a margin-left after the AMP CSS”, and for this, you have to guarantee that your child-theme stylesheet is getting defined after the AMP one and not before.

    Thread Starter Pawel Slabiak

    (@pawelslabiak)

    An acceptable workaround in my case has been to deactivate the plugin and append a north-east arrow character to all external links by targeting them with CSS: 

    
/* Append NE arrow (unicode nr. U+2197) to all links except ones that begin with "https://mydomain" */
a:not([href^="https://mydomain"])::after {
	content: "\2197";
	display: inline-block;
}
/* remove arrow from links to page anchors */
a[href^="#"]::after {
	content: none;
}
/* remove arrow from relative links */
a[href^="/"]::after {
	content: none;
}
/* remove arrow from links to URIs that begin with "https://twitter" (in my case, the "Tweet This" buttons) */
a[href^="https://twitter"]::after {
	content: none;
}

    Styling can also easily be done with an icon font:

    
a:not([href^="https://mydomain"])::after {
	content: "\00a0 \f08e"; /* non-breaking space followed by external link icon */
	font-family: "FontAwesome";
	display: inline-block;
}

    However, this is not a solution to the original problem of how the styling introduced by External Links and stripped by the AMP plugin may be successfully reintroduced after tree-shaking. A fix to that issue would still be welcome.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘AMP removes leading margin’ is closed to new replies.