x

No margin for Amazon HTML image link on mobile

Hi - newb here.  I'm using Amazon affiliate program.  When I embed  image link html code, and edit the code to show a 10PX margine - the images show a margin on desktop, and also show the margin in the Weebly editor mobile option viewer (though I do see the note:  "This is a responsive theme, mobile options do not apply.").  However,  margine does not show on the device. Example in this link results in calendar images touching each other on a mobile device: http://www.mypointmaps.com/store-new-england-calendars.html

Thoughts?  an ugly work around for me would be to screen shot images, place in a gallery and link via text....but that seems rather inelegant. I suspect there is a better solution?  ; )

Thanks in advance!

893 Views
Message 1 of 8
Report
7 REPLIES 7
Square

It looks like your CSS is still working, but the width of the images isn't quite enough to push the smaller image underneath the larger one:

image

You'll probably need to make that image's inline CSS also make its display style block:

display: block;
883 Views
Message 9 of 8
Report

Thanks Adam!  I'll research how to execute your answer and let you know how I make out : )

874 Views
Message 9 of 8
Report
Square

Good luck! Feel free to post again if you have trouble.

859 Views
Message 9 of 8
Report

Thanks for the Kudos Adam ,   but afraid undeserved : )   I last coded a website in DreamWeaver 10 years ago, and I remember when CSS was becoming popular, how it seemed too complicated for me to figure out and I avoided it.  I think I'll spend more time learning it in the future - but at the moment, I'm trying to 'cheat' and get something out with least effort to 'test' this Amazon associate concept.

I'll admit that I tried again to mess with the margins in the amazon HTML code (61px seemed to smallest margin I could get to) when I couldn't find the css I needed to edit....it got me close but wasn't perfect.

So if I can impose one more time - how do I determine what the CSS is that is applied to the custom HTML?

I tried right clicking on the item and chose 'inspect' to see the code - but nothing jumps out at me as the CSS governing the Amazon html.


image

Grey highlight is the Amazon HTML link I right clicked

image

I tried examining the code on this page http://www.mypointmaps.com/store-hats-apparel.html   to see why those images display correctly in-line on the mobile device, with appropriate margin, but again, nothing jumped out at me - and I was thinking that perhaps those images already incorporate a white border around the edge (?)

So again - everything looks fine on the desktop.  It's just the pesky mobile device view that is not displaying the images properly.

Thanks again for your help!

Keith

849 Views
Message 9 of 8
Report
Square

It's never too late to learn! I started making websites in the late 90s when Geocities was at its pinnacle (thankfully anything I made then is long since lost...).

I wouldn't use the Web Inpsector in the editor since everything is rendered differently there and things might not match up on the live site. This is what you'll see for your code on the live site, though:

image

All you really need to try is changing this:

style="border:none !important; margin:0px !important;"

to this:

style="border:none !important; margin:0px !important;display: block !important"
847 Views
Message 9 of 8
Report

So - Changing to 'display: block' didn't actually do it for me.  

However,  what DID do it was placing a spacer BENEATH each image (previously I was trying it on the side with no success) and this has the exact deisred effect for me.   

Thanks so much for your willingness to help Adam! I'll reach out again if I have a new issue : )

Keith

image

841 Views
Message 9 of 8
Report
Square

Thanks for updating us, @MyPointMaps! Smiley Happy Glad you were able to sort it out. 

839 Views
Message 9 of 8
Report