How do you make an image span the width of eBay's description field exactly? (No horizontal scrolling)

Question

eBay listings have a description field with 5000 character limit. It allows some html tags and the style attribute, but a lot of functionality is disabled.

When I insert an image that is too wide, eBay adds horizontal scrolling, which is a terrible user experience. I want an image that automatically resizes to the available width without triggering horizontal scrolling.

It seems the most widely used, and officially recommended method of resizing to different screens, is changing the viewport using the meta tag as described here.

Unfortunately this also changes the text size, and doesn't give the option to only scale one image and not others. Is this the only method? Or is there another way?

Or am I just using the meta tag wrong? (I put <meta name="viewport" content="width=device-width, initial-scale=1"> on the first line and wrote the rest of the description under it.)

Answer 1

This is the old code I've used for a template in the past. Using containers and remotely hosted CSS I was able to constrain images to the container wrapped around the whole template.

Unfortunately, as you know, eBay is a bit rubbish when it comes to responsive CSS, so this doesn't work well when under 1400px (I think).

I think you may be able to add some responsive media queries in order to stack this properly. However, this was created before the days of good responsive design I'm afraid.

CSS

@charset "utf-8";
/* CSS Document */

body {
background:#ffffff;
/*background-image:url(http://www.unbmedia.co.uk/Clients/UNB09029/bg.jpg);*/
background-position:center;
background-repeat:repeat-y;
}

/* Constrain Page Size */
.pagewidth {
    width:954px;
    text-align: centre;
    left: 0;
    margin:auto;
}


.pageminwidth {
    text-align: left;
    left: 0;
}

/* Footer Links with Country Names */
#sFooter {
    text-align:center;
    font-size:10px;
}

/* Ebay Footer Links */
span.ebay{
    text-align:center;
}

#title{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    background:#548101;
    color:#FFF;
    padding:20px;
    color:#777;
    font-size:14px;
    padding:3px;
    font-family: serif;
    letter-spacing: 0.5px;
    font-weight: 100;
    transition: all 0.3s;
}

#left-men-tit{
    background: #18213E;

    color:white;
    font-size:14px;
    padding:3px;
    font-family: serif;
    letter-spacing: 0.5px;
    font-weight: 100;
    transition: all 0.3s;
    padding:10px;

}

#left-men{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#548101;
    font-size:14px;
    padding-left:12px;
    padding-top:3px;
    padding-bottom:3px;

}

#desc-title-list{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#548101;
    font-size:12px;
}

#desc-desc-list{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;   color:#000000;
    font-size:12px;
}

#product-desc-title{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;   color:#fff;
    font-size:12px;
    background-color:#548101;
    padding:10px;

}

#product-desc{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:12px;
    padding-left:5px;
}

td#product-desc{
    border:thin;
    border-color:#000;
}
table#desc{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    vertical-align:text-top;
}

#Main{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    vertical-align:top;
}

#main-holder{
    font-size:0px;
}

/* Category Links */
a:link{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#777;
    font-size:12px;
    padding:3px;
    text-decoration:none;
    font-weight:bold;
}

a:visited{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#777;
    font-size:12px;
    padding:3px;
    text-decoration:none;
    font-weight:bold;
}

a:hover{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color: #18213E;
    font-size:12px;
    /*background:#024873;*/
    text-decoration:none;
    padding:3px;
    font-weight:bold;
    padding-left: 7px;
}

a:active{
    font:Arial, Helvetica, sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    color:#548101;
    font-size:12px;
    /*background:#024873;*/
    text-decoration:none;
    padding:3px;
    font-weight:bold;
}

div#EBdescription{
    font-size:0px;
}

/*** NEW LISTING TEMPLATE CSS ***/
.container{ width: 100%; max-width: 1100px; margin:auto;}
.ebayList-MainCol{float: right; width: 79%;}
.ebayList-LeftCol{float: right; width: 21%; margin-top: 162px;}
.ebayList-LeftCol h3{display: block; width: 87%; padding: 10px; margin: 0 0px 0 0; background: #18213E; color: white;
font-size: 16px; font-weight: 100; border: 1px solid black; width: 200px;}
.ebayList-LeftCol ul{ border: 1px solid #CCC; padding: 10px; margin: 0 10px 0 0; }
.ebayList-LeftCol li:before { content: ">"; padding-left: 5px; padding-right: 5px; margin-left: 0px; font-size: 14px;}
    .ebayList-LeftCol li{ list-style: none; font-size: 14px; font-weight: 100; color:#777; padding: 10px 0;}
        .ebayList-LeftCol li a:link{font-weight: 100; color:#777!important; font-family: serif; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s;}
        .ebayList-LeftCol li a:hover{transition: all 0.3s;}
.ebayList-Header img{ width: 100%;}
.ebayList-ProductImage{width: 100%; text-align: center;}
    .ebayList-ProductImage img{width: 100%; margin: auto; position: relative; text-align: center;}
    .ebayList-ProductImage h1{ text-align: center; font-weight: 100; letter-spacing: 1px; font-size: 26px; color: #18213E; max-width: 900px; width: 100%; margin: 50px auto; }
.ebayList-Summary--Wrapper{float: left;}
  .ebayList-Summary { width: 50%; float: left;}
.ebayList-Summary h2{ font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
    .ebayList-Summary p{ font-weight: 100; font-size: 14px; line-height: 22px;}
.ebayList-Spec { width: 48%; float: left; margin-bottom: 20px; margin-top: 0px; padding-left: 2%}
.ebayList-Spec h2{font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
    .ebayList-Spec dl{ width: 100%;}
        .ebayList-Spec dt{ width: 30%; float: left; font-weight: bold; margin: 0; font-size: 14px; margin-bottom: 5px;}
        .ebayList-Spec dd{ width: 70%; float: left; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Shipping-Returns { float: left; width: 50%; text-align: left; margin-bottom: 50px;}
    .ebayList-Shipping-Returns img{width:98%;}
    .ebayList-Shipping-Returns + .ebayList-Shipping-Returns{text-align: right;}
.ebayList-footer{float: left;}
    .ebayList-footer img{ width: 100%;}

@media (max-width:1000px) {
    .ebayList-LeftCol{ display: none; }
    .ebayList-MainCol{ width: 100%; }
}
@media (max-width:700px) {
    .ebayList-Spec{ width: 100%; padding-left: 0;}
    .ebayList-Summary{ width: 100%; }
    .ebayList-Shipping-Returns{ width: 100%; }
}

Listing Description:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://remote.littens.co.uk/listing.css" type="text/css">
<div class="container">
  <div class="ebayList-Header"><img src="https://remote.littens.co.uk/header.png" alt=""></div>
  <div class="ebayList-MainCol">
    <div class="ebayList-ProductImage">
      <h1>CHILDREN'S CHARACTER DESIGN BEANBAG BEAN BAG SEAT FILLED JUNIOR KIDS TODDLER</h1>
      <img src="https://i.ebayimg.com/00/s/OTIxWDEyMjg=/z/tagAAOSw-vlViACO/$_57.JPG?set_id=880000500F">
    </div>
    <div class="ebayList-Summary--Wrapper">
      <div class="ebayList-Summary">
        <h2>Product Summary</h2>
        <p>These are official novelty character licensed beanbags. These are filled to a perfect volume of 3 cubic ft, giving it an ideal structure and cushioning for the children to sit and enjoy. These would make an ideal piece of soft furniture in
          a child’s room. All our products are fully compliant to the UK Furniture and Furnishings Regulations.</p>
        <p>Please select the design you require from the drop down menu at the top.</p>
      </div>
      <div class="ebayList-Spec">
        <h2>Specification</h2>
        <dl>
          <dt>Product</dt>
          <dd>Beanbag</dd>
          <dt>Brand</dt>
          <dd>Assort</dd>
          <dt>Version</dt>
          <dd>Kids</dd>
          <dt>Colour</dt>
          <dd>Assort</dd>
          <dt>Size</dt>
          <dd>3 Cubic Feet</dd>
          <dt>Dimensions</dt>
          <dd>50x50x50cm</dd>
          <dt>Includes</dt>
          <dd>Beanbag &amp; Filling</dd>
          <dt>Material</dt>
          <dd>100% Cotton / Polystyrene Bead</dd>
          <dt>Washable</dt>
          <dd>Cover Machine Washable</dd>
          <dt>Suitability</dt>
          <dd>Over 3 Years Of Age</dd>
        </dl>
      </div>
    </div>
    <div class="ebayList-Shipping-Returns">
      <img src="https://remote.littens.co.uk/postage-info.png" alt="">
    </div>
    <div class="ebayList-Shipping-Returns">
      <img src="https://remote.littens.co.uk/returns-policy.png" alt="">
    </div>
  </div>
  <div class="ebayList-LeftCol">
    <h3>Shop Categories</h3>
    <ul>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Duvets-/_i.html?_fsub=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Duvets</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Pillows-/_i.html?_fsub=9&amp;_lns=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Pillows</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Mattress-Toppers-/_i.html?_fsub=1442372012&amp;_lns=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Mattress Toppers</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Curtains-/_i.html?_fsub=3367499012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Curtains</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Duvet-Cover-Sets-/_i.html?_fsub=7&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Duvet Covers Sets</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Cushion-Covers-/_i.html?_fsub=10617545012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Cushion Covers</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Bedding-Bundle-Sets-/_i.html?_fsub=3&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Bedding Bundle Sets</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Childrens-Room-/_i.html?_fsub=8&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Childrens Room</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Nursery-Baby-/_i.html?_fsub=1066056012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Nursery &amp; Baby</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Livingroom-/_i.html?_fsub=1269320012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Livingroom</a></li>
      <li><a href="http://stores.ebay.co.uk/Littens-Co/Bed-Linen-/_i.html?_fsub=1442373012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Bed Linen</a></li>
      <li><a href="Bedspreads / Throws">Bedspreads / Throws</a></li>
    </ul>
  </div>
  <div class="ebayList-footer">
    <img src="https://remote.littens.co.uk/footer.png" alt="footer">
  </div>
</div>

Answer 2

I found this site when trying to solve the same problem. I'm new to coding and generally reverse engineer stuff until I get something to work. My banner is the same image url as the ebay shop banner, yet it failed to scale properly with the code I was using.

As it happens I tried the following and it seems to have helped. If it helps someone else then great.

<style>
.co_logo { 
display: flex;
margin-bottom: 10px;
}
.logo_img {
max-width: 100%;
flex-grow: 1;
}
<style>

<div class="co_logo">
<img class="logo_img" src="INSERT LOGO IMG URL HERE">
</div>