eBay advert w3.css image not resizing

Keith · July 31, 2018

Hi,

I searched the forums but haven't found an answer about this.

I have created a simple eBay template based on w3.css inline style sheet. When I paste into the eBay form it passes checks and the mobile test also works. When I publish the advert, however, the images in Chrome, IE, Firefox (latest versions) all are fixed at original size. If I browse from my mobile phone, however, the resizing works well and appears as intended.

Any idea why it doesn't work on desktop browsers?

Advert is here: https://www.ebay.co.uk/itm/202385270343

and the template I created:

<!DOCTYPE html>
<html>
<title>Keith eBay Template 2018</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,p,a,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body>

<div class="w3-container w3-light-green">
  <h2>Harry Potter and the Philosopher's Stone</h2>
  <h4>Ted Smart First Edition, Hardback, 3rd Print</h4>
  

<div class="w3-panel w3-round-large w3-khaki">
  <h3>Description</h3>
  <p>This is an auction for my Harry Potter and the Philosopher's Stone Ted Smart First Edition. It is a 3rd Print as you can see from the
  inside cover. These are still highly sought after and I'm sure will continue to gain value over time!</p>
  <p>This edition has lived for at least 10 years in a box in a cool dry cupboard, and prior to that on a shelf in the shade so the cover hasn't faded at all. There is a little
  wear that can be seen to the top edge of the sleeve but there are no marks on or in the book itself.</p>
  <p>How do you identify which edition and print run? I found the following link helpful:</p>
  <p></p>
  <a href="https://www.peterharrington.co.uk/blog/is-my-harry-potter-book-valuable-2/" target=_blank">Peter Harrington - Is my Harry Potter Book Valuable</a>
  </p>
</div>  

<div class="w3-panel w3-round-large w3-khaki">
  <h3>Shipping</h3>
  <p>I will ship this item using the Hermes ParcelShop service. If you would like me to use an alternate courier please contact me.
</div>

<div class="w3-panel w3-round-large w3-khaki">
  <h3>Photographs</h3>
  <img class="w3-image w3-round-large" src="https://image.ibb.co/gFRCJo/IMG_2036.jpg" style="width:100%">
  <img class="w3-image w3-round-large" src="https://image.ibb.co/jn5sjT/IMG_2041.jpg" style="width:100%">
  <img class="w3-image w3-round-large" src="https://image.ibb.co/iGJWB8/IMG_2037.jpg" style="width:100%">
  <img class="w3-image w3-round-large" src="https://image.ibb.co/cBfiPT/IMG_2039.jpg" style="width:100%">
  <img class="w3-image w3-round-large" src="https://image.ibb.co/kzuk4T/IMG_2038.jpg" style="width:100%">
</div>
  
</div>

</body>
</html>

justsomeguy · July 31, 2018

I'm not sure how you expect it to look, but those 5 images are set to be 100% the width of the container they're in. So however wide that parent div is, that's how wide the images will be.

Keith · August 1, 2018

Thanks @justsomeguy the parent div is a w3-panel which I would expect to resize to the width of the browser. I expected the images to be resized within the w3-panel. This is how it behaves in a mobile device.

Edited August 1, 2018 by Keith

justsomeguy · August 1, 2018

That's how I see it on my computer also. It's not the entire browser width though, it's just the width of the container. That gets embedded in some container in the ebay listing that itself isn't 100% of the browser width, but it does take up the entire width that's assigned to it.

Sign In

eBay advert w3.css image not resizing

Recommended Posts

Keith

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Keith

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity