image appears broken once website is published

alinegd · ‎09-02-2016

Hi!

I have edited the HTML and CSS to add floating social icons (I didn't like those from the theme) and the website editor shows them exactly the way I intended. I clicked on Publish, and the pictures appear broken (the links work, though) on Chrome and Safari (I haven't tried other browsers but I'm sure the problem is still the same).

The images are in gif and png.

Here is the HTML code, followed by the CSS:

<body class='no-header-page wsite-background  wsite-theme-light'>
<div id="top-wrap">
	<div class="container">
			<div class="custom">
<ul>
<li><a href="https://www.facebook.com/metronomerecordingsltd/"><img src="facebook.gif"/></a></li>
<li><a href="https://twitter.com/uk_metronome"><img src="twitter.png"/></a></li>
<li><a href="https://www.instagram.com/uk_metronome/?hl=en"><img src="instagram.png"/></a></li>
<li><a href="https://www.linkedin.com/company/metronome-distribution-limited"><img src="linkedin.png"/></a></li>
</ul>
</div>

.custom {
  position: fixed;
  left: 0.2%;
  bottom: 35%;
}
.custom  ul {
list-style-type: none;
}

.custom li {
   font-size: 23px; 
}

Do you know if I did something wrong or is the problem on Weebly's end?

Thanks

on Chrome in the Weebly editor

Queso · ‎09-02-2016

Hey there! Sorry for any trouble. We wouldn't be able to advise you on the details of custom code. Listing the page in quesiton might be a big help in letting our community here check it out for you, however!

alinegd · ‎09-05-2016

The icons should appear on every page of this website: www.metronome.co.uk

Thank you!

bubblecut · ‎04-04-2017

I have a similar problem. I created a standard page with some pics. I inserted the pics using the "image" block. When the page is published, some of the images appear broken but in the editor they are fine? I'm not using any special custom code. Please help!

Adam7 · ‎04-05-2017

Can you provide me a link where you see that, @bubblecut? I'll take a look!

bubblecut · ‎04-05-2017

Hello @Adam, thank you very much for your reply. I have this problem whenever I copy a page. The copied page has the images and these images look fine in the editor but when published they appear broken. After several hours of searching, I found a workaround reported on this website but I can't find it now but it said to click on every image on the copied page so the dialog opens up and then the image will show when published. Thank you!

p.s. Is there an undo button? Also is there a way to rearrange the order of images in a gallery? Currently, I can't seem to. I must delete all pictures and reinsert to get a new order. Thank you again!

Queso · ‎04-05-2017

Hello! You should be able to rearrange items in a Gallery element by clicking the element to activate it, then clicking and dragging the images into the order you'd like.

MJCS · ‎04-17-2017

Hi all,

the source links that you have used in the HTML don't point to the location of the .gif and .png logo files.

<img src="facebook.gif"/>

Unless your images are in the same directory as the HTML files, they won't be found. Weebly doesn't give you that access. You'll need to upload the four logos to your Assets folder in the HTML/CSS editor and then add the correct link in the above HTML.

Regards, Mark