Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #897313

    Hi
    I’ve got a draft post which includes clickable Amazon image links. The HTML link is added to the ‘text’ section of a text block and aligned center. When I preview the post most of the images (but not all) initially appear centered, then jump to a position on the left. Only 2 of the images remain centered. When I first created the draft post this was not a problem, it just started suddenly and I can’t figure out how to fix it. I want all of the image links centered.

    My website is not live and it’s an unpublished, draft post so I can’t give you a link, but I can provide log in details privately if you require them.
    Can you help?

    Thanks, Kim

    #897383

    Hey Kim,

    Login details would be helpful since we need to be able to inspect the element in question. Please post login details in private and how and where we can reproduce the problem.

    Best regards,
    Rikard

    #897421

    Go to Posts, ’10 Essentials to pack for travelling’. The amazon image links are aligned center in the backend, but left when I preview the draft post.
    Thanks
    Kim

    • This reply was modified 3 years, 3 months ago by  Rikard.
    #897861

    Hi Kim,

    Thanks for the details, what is the URL or your site?

    Best regards,
    Rikard

    #899129
    This reply has been marked as private.
    #901089

    Hi
    Just wondering if someone can look at this? I’ve added WordPress log in details privately and info on where to find the draft post above, plus the website address (still under construction so you’ll need to view via WP login). Let me know if you need anything else?

    I need this issue resolved before I can launch my site.
    Thanks
    Kim

    #901108

    Hi,

    Did you add an inline styling to the text? Please replace the text block with the code block element or add a class attribute to the tags instead of an inline styling.

    Best regards,
    Ismael

    #901221

    Hi Ismael

    Thanks for your reply. I have tried adding the code to both a text block and a code block and I get the same result either way. The image links appear centered at first, then jump to the left when I preview the draft post. They are center aligned in the backend.
    Below is the code I am using…
    I’m new to all of this so I don’t fully understand what you mean by an inline styling, or how/where to add a class attribute. Can you explain in detail?
    Thanks
    Kim

    <p style=”text-align: center;”></p>

    #901829

    Hi,

    Please replace the code with the following css, adjust the markup as needed.

    <span class="aligncenter">Test</span>
    

    And then add the following css code.

    .aligncenter { text-align: center; }
    

    Best regards,
    Ismael

    #901860

    Hi

    Thanks for the reply. Can you explain where exactly to put these? Do I add
    <span class=”aligncenter”>MY AMAZON HTML LINK</span> to the text section in the text block/ the code block?

    Where do I add .aligncenter { text-align: center; } ?

    Thanks

    Kim

    #902548

    Hi,

    You can use the code or text block. The css code should go to the Enfold > General Styling > Quick CSS field.

    Best regards,
    Ismael

    #902662

    Hi Ismael

    I have tried what you suggested and it is still not working. The images are still jumping to the left upon preview. Can you take a look and let me know how to fix this?

    Thanks

    Kim

    #903310

    Hi,

    We created an example in a test page. ( see private field )

    Best regards,
    Ismael

    #903609

    Hi Ismael

    I’ve taken a look at the test page and it’s working fine, like all my other uploaded images. The issue I’m having is with the Amazon image links, like I said in the first post. It is only the Amazon clickable image links that are jumping to left alignment.

    Could you take a look at my specific draft post (’10 essential Things to Pack For Travelling’) and see if there’s a bug or something? I’m following the same format for all of the image links, however 3 of them are aligned correctly in the center, and all the others appear in the center initially, then jump to left alignment.

    Thanks

    Kim

    #904047

    Hi,

    Add the “aligncenter” class attribute directly to the img tag. We modified the “pen” as example:

    <a href="https://www.amazon.com/gp/product/B01G7SKKC6/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01G7SKKC6&linkCode=as2&tag=goingthewhole-20&linkId=d9e9b273c58c4f94e8842f50998746fb" target="_blank" rel="noopener" rel="nofollow"><img src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=B01G7SKKC6&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=goingthewhole-20" border="0" /></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=goingthewhole-20&l=am2&o=1&a=B01G7SKKC6" alt="" width="1" height="1" border="0" />
    

    Best regards,
    Ismael

    #904259

    Hi Ismael

    Thanks for this, that’s sorted the issue with those image links.

    Now, I’m getting the same problem with blog posts that are centered (where I only have one post in the blog posts element). The title text remains centered, but the image jumps to the left (see ‘East Asia’ page if you need an example). How can I sort this?

    Thanks

    Kim

    #904617

    Hi,

    The sw-pinit plugin wraps the image inside another container. Please add this code in the Quick CSS field.

    div.sw-pinit {
        display: table!important;
        line-height: 0;
        position: relative!important;
        margin: 0 auto;
    }

    Best regards,
    Ismael

    #904648

    Thanks Ismael.

    The image is now centered, however for the blog post images, and the Amazon image links in the blog post previously mentioned, the hover overlay (with the circle and arrow image) is still appearing on the left. For the Amazon links it appears over nothing, hovering over the previous position of the images. For the blog post image it is appearing half on/half off the featured image.

    Is there a way to sort this, or just remove the hover link all together?

    Thanks

    Kim

    #904660

    Hi,

    The overlay is not positioned correctly because of the pinit button. Please disable the overlay with the following css code.

    .sw-pinit + .image-overlay {
        display: none !important;
    }

    Best regards,
    Ismael

    #904663

    Thanks Ismael, you’ve been a great help. Everything is sorted in this thread now.

    Kim

    #904761

    Hi,

    Glad that Ismael helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Image link aligning left when set to center’ is closed to new replies.