Banner not centered on AMP page

  • Resolved Spacetime

    (@spacetime)


    7 years, 2 months ago

    I have the following style and code;

    .ai-center {
    margin: 8px auto;
    text-align: center;
    clear: both;
}
    <div class="ai ai-center ai-12">
  <img src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100">
</div>

    The banner is centered as expected.

    However on AMP page the banner is not centered:

    .ai-center {
    margin: 8px auto;
    text-align: center;
    clear: both;
}
    <div class="ai ai-center ai-12">
  <amp-img src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100" width="100" height="100" sizes="(min-width: 100px) 100px, 100vw" class="amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" style="width: 100px;"><i-amphtml-sizer style="display: block; padding-top: 100%;"></i-amphtml-sizer><img decoding="async" class="i-amphtml-fill-content i-amphtml-replaced-content" src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100"></amp-img>
</div>
Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Mohammed Kaludi

    (@mohammed_kaludi)

    Hi Igor @spacetime

    Your having issues with centering the banner in AMP?

    Or your having some other issue?

    Let me know how can I recreate it on my end, a URL or something would be appreciated so that I can see the HTML structure and help you immediately.

    Thread Starter Spacetime

    (@spacetime)

    On AMP page the banner is not centered.

    Please use the code above to recreate the problem.

    What does your css look like for the container around the banner? You may simply have a hierarchical css issue.

    Thread Starter Spacetime

    (@spacetime)

    Only the code that is listed above.

    Igor – we can’t help you my friend unless you give us a url. We don’t know what you have actually done or not done. Put up a url in the box – only those logged in can see it.

    Thread Starter Spacetime

    (@spacetime)

    Normal page – the banner is centered:
    https://nasa.si/test-post

    AMP page – the same banner is not centered:
    https://nasa.si/test-post/amp

    Plugin Author Mohammed Kaludi

    (@mohammed_kaludi)

    Hi @spacetime

    Thanks for the URL, please apply this CSS

    .ai-center {
    margin: 8px auto;
    display: inline-block;
    width: 100%;
}
.ai-center * {
    margin: 0 auto;
}

    That should do the trick.

    Thread Starter Spacetime

    (@spacetime)

    Unfortunately it does not work.

    The banner on the normal page is not centered.
    Tested in Chrome and Firefox.

    Thread Starter Spacetime

    (@spacetime)

    The same issue is when using inline styles. I have updated test post to include both approaches (alignment class and inline style).

    We already have many pages that use both approaches for alignment. It would be very hard to update all pages on all websites just to make the alignment work also on AMP pages.

    Plugin Author Mohammed Kaludi

    (@mohammed_kaludi)

    @igor

    That solution works as I have checked on the test site that you have sent. See: https://take.ms/OBjTq

    I think you are not looking at the source correctly. Try to add a local image for testing instead of placeholder.

    The Inline style approach is definitely not going to work in this case.

    Thread Starter Spacetime

    (@spacetime)

    Your screenshot is for AMP page.

    Please check my post above – on the normal page with your CSS it doesn’t work anymore:

    I believe the location of the image is irrelevant. The alignment should work regardless of the image source.

    Nancy

    (@nancy10199)

    Hi there,

    is there a solution now? The given code

    .ai-center {
    margin: 8px auto;
    display: inline-block;
    width: 100%;
    }
    .ai-center * {
    margin: 0 auto;
    }

    is not working for us, too.

    You can see here – the small logo in the box…

    https://casinoplusbonus.com/leo-vegas-casino-bonus/amp/

    Cheers

    Nancy

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    @spacetime

    Sorry for the late response. I was checking only in AMP.

    Please use the below code for AMP & non-AMP compatibility. 

    .ai-center {
    margin: 8px auto;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.ai-center * {
    margin: 0 auto;
}

    That should do the trick.

    Thread Starter Spacetime

    (@spacetime)

    @ahmedkaludi

    Thank you!

    Actually, I was asking because I am the author of the Ad Inserter plugin and noticed alignment issues with images. Since Ad Inserter is used also for AMP pages I will simply implement additional alignment classes for AMP pages.

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Hi @spacetime

    I know! I still wanted to help you ??

    Would you be kind enough to share a review because I was helping you as a user of the plugin ??

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Banner not centered on AMP page’ is closed to new replies.