Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • January 15, 2018 at 3:09 am #897313
    goingthewholehogg

    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

    January 15, 2018 at 5:46 am #897383
    Rikard

    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

    January 15, 2018 at 8:31 am #897421
    goingthewholehogg

    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 6 years, 9 months ago by Rikard.
    January 16, 2018 at 4:47 am #897861
    Rikard

    Hi Kim,

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

    Best regards,
    Rikard

    January 18, 2018 at 1:44 pm #899129
    goingthewholehogg
    This reply has been marked as private.
    January 23, 2018 at 2:20 am #901089
    goingthewholehogg

    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

    January 23, 2018 at 3:41 am #901108
    Ismael

    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

    January 23, 2018 at 7:19 am #901221
    goingthewholehogg

    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>

    January 24, 2018 at 3:14 am #901829
    Ismael

    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

    January 24, 2018 at 4:05 am #901860
    goingthewholehogg

    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

    January 25, 2018 at 5:43 am #902548
    Ismael

    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

    January 25, 2018 at 7:20 am #902662
    goingthewholehogg

    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

    January 26, 2018 at 11:48 am #903310
    Ismael

    Hi,

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

    Best regards,
    Ismael

    January 27, 2018 at 2:45 am #903609
    goingthewholehogg

    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

    January 29, 2018 at 5:50 am #904047
    Ismael

    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

    January 29, 2018 at 1:54 pm #904259
    goingthewholehogg

    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

    January 30, 2018 at 5:05 am #904617
    Ismael

    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

    January 30, 2018 at 7:27 am #904648
    goingthewholehogg

    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

    January 30, 2018 at 8:00 am #904660
    Ismael

    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

    January 30, 2018 at 8:27 am #904663
    goingthewholehogg

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

    Kim

    January 30, 2018 at 11:56 am #904761
    Nikko

    Hi,

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Image link aligning left when set to center’ is closed to new replies.