Alignment issue with Amazon affiliate links

Posted in: Newspaper
Post count: 11

Hi, I’m trying to figure out which CSS rules I should edit to make a proper alignment between the amazon affiliate link and the following text.

Here you can see what I’m talking about: http://www.gadgetsvirali.com/penna-stampante-3d-per-disegni-stereoscopici-le-migliori

As you can see, below the images, inside the image caption I’m used to put the Amazon affiliate code followed by some text. In the previous theme I had no problem, once I installed this theme, the text goes below the affiliate link, as you can see here in this screenshot http://snag.gy/BaqVq.jpg deleting the Amazon img code it shows up properly but I’m not supposed to touch the Amazon affiliate link.

If you visit the page on mobile devices the issue gets worse: http://snag.gy/u3lnK.jpg

How can I align the affiliate link and the text?

Thanks,

Alessandro

Post count: 23312

Hello alexalex11,

I’ve checked your website and I saw your problem with the alignment. Please try the code below and place it in Theme panel->Custom Css area, like this: http://screencast.com/t/7sVCbUXT

.wp-caption-text a {
float: left;
padding-right: 10px;
}

The result you should see here:

I’ve verified on mobile version and seems to work properly, like this: http://screencast.com/t/2ip0PULjAs5j

Hope this helps and let us know how it goes!

Thank you for the message!

Post count: 11

Hello,

I placed the code and on desktops is now ok. thank you.

I still see the problem on mobile devices. I cleared the WP cache and the CDN cache.

Try to verify this issue not by desktop with the browser (width <767px) but on your mobile phone. (I’ve tried with an iPhone)

Let me know if you see the issue also.

Thanks

Post count: 23312

Hello alexalex11,

Please try another method of CSS with the code below. Please remove the latest code that I gave you and try this:

.wp-caption-text img {
display:inline!important;
}

The result you should see here: http://screencast.com/t/s5WHuwzdpH It should work.

Hope this helps and let us know how it goes!

Thank you for the message!

Post count: 11

Hello, I removed the previous code and place the new one but nothing has changed. I don’t see the result on the screenshot.

Post count: 11

But I now placed this code:

.td-post-content img {
display: inline !important;
}

and it looks working. please confirm it’s ok to use that CSS rule.

Thanks.

Post count: 22421

Hello,

It is OK to use the rule if it does not affect other parts of the website. If it works for the caption text and it does not re-position the images then you’re all set. I have tested it out a few times including your site and my testing site but i could not find any problems in using the code.

Have a nice day!

Post count: 11

Hello, I noticed the problem hasn’t been fixed for all the posts. The CSS code is now:


.td-post-content img {
display: inline !important;
}

.wp-caption-text > a {
display: inline !important;
}

.wp-caption-text img {
display:inline!important;
}

If I visit this page: http://www.gadgetsvirali.com/gadgets-invenzioni-innovative-per-migliorare-la-vita-quotidiana/ with an iPhone 5s I still see the gap…

Post count: 22421

Hello,
I checked this again and found an empty image in the code that could be the culprit: http://screencast.com/t/5dNVG6vk
Please check your code for the caption link and remove the image.
Thank you!

Post count: 11

yes I see, but that is the part of the Amazon code which is not supposed to be changed. (if you know I can just let me know)

Post count: 11

UPDATE: If I delete the code from the Amazon affiliate code the problem is gone but I repeat, I shouldn’t touch it. If there is another solution would be appreciated.

ANOTHER QUESTION: I modified the date format in the Italian format. I’ve been able to modify the date format only on the top bar. I couldn’t find the option to edit the date format for the posts: http://snag.gy/t47uQ.jpg

Thanks and happy new year.

Post count: 23312

Hello alexalex11,

Please try to replace the first snippet of the code that I gave you above with the code below and try it.

.wp-caption-text img {
display: none!important;
}

For your second request, if you want to change the format of the posts date, you can set it from Word Press, like this: http://screencast.com/t/7dUUHP4Q and if you want to have control to the date and time on the top section, you have to change the format date in this core file -> http://screencast.com/t/2a0t3VDCOOpw
For more references about the date and time format, you can find here: https://codex.wordpress.org/Formatting_Date_and_Time

Hope this helps and let us know how it goes!

Thank you for the message!

Post count: 11

Thanks for the reply. The date is ok now.

About the code that CSS rule does fix the issue on the wp-caption-text div but sometimes I place the code in the content as well and that would be a problem. I can’t use the same CSS code you gave because it would hide the imgs.

I think there is nothing wrong to delete the part of the Amazon code. I’m not sure if it’s against the Amazon TOS but I have no choice. (If you have another solutions to fix the issue in the content also would be great)

Thanks

Post count: 22421

Hello,
You can ask amazon if it’s OK to remove the image inside the link as it creates issues with positioning and let us know their position on the matter.
Thank you!

Viewing 14 posts - 1 through 14 (of 14 total)
The forum ‘Newspaper’ is closed to new topics and replies.