Tagged: image alignment
-
AuthorPosts
-
January 15, 2018 at 3:09 am #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
January 15, 2018 at 5:46 am #897383Hey 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,
RikardJanuary 15, 2018 at 8:31 am #897421Go 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 #897861January 18, 2018 at 1:44 pm #899129This reply has been marked as private.January 23, 2018 at 2:20 am #901089Hi
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
KimJanuary 23, 2018 at 3:41 am #901108Hi,
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,
IsmaelJanuary 23, 2018 at 7:19 am #901221Hi 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
KimJanuary 24, 2018 at 3:14 am #901829Hi,
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,
IsmaelJanuary 24, 2018 at 4:05 am #901860Hi
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 #902548Hi,
You can use the code or text block. The css code should go to the Enfold > General Styling > Quick CSS field.
Best regards,
IsmaelJanuary 25, 2018 at 7:20 am #902662Hi 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 #903310Hi,
We created an example in a test page. ( see private field )
Best regards,
IsmaelJanuary 27, 2018 at 2:45 am #903609Hi 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 #904047Hi,
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,
IsmaelJanuary 29, 2018 at 1:54 pm #904259Hi 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 #904617Hi,
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,
IsmaelJanuary 30, 2018 at 7:27 am #904648Thanks 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 #904660Hi,
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,
IsmaelJanuary 30, 2018 at 8:27 am #904663Thanks Ismael, you’ve been a great help. Everything is sorted in this thread now.
Kim
January 30, 2018 at 11:56 am #904761Hi,
Glad that Ismael helped you. Thanks for using Enfold :)
Best regards,
Nikko -
AuthorPosts
- The topic ‘Image link aligning left when set to center’ is closed to new replies.