Jump to content

eBay advert w3.css image not resizing

Recommended Posts


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>
<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">
body,p,a,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}

<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">
  <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>
  <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>

<div class="w3-panel w3-round-large w3-khaki">
  <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 class="w3-panel w3-round-large w3-khaki">
  <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%">



Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...