Looking for HTML code for a description with a width that is mobile friendly.

[chappello1]

All of my descriptions are too wide and require mobile users to scroll horizontally to read them.

[shipscript]

Hi @chappello1 

Here is a code for one of your listings:

I simply removed the table code and replaced the border elements with DIV elements (top and bottom). The descriptive content in the middle keeps the old coding (the indented content in the middle):

<style>
img { max-width: 100%;}
</style>
<div style="background-color:#E4E0D9; padding:1%"><br>
<div style="max-width:1000px; padding:50px 20px; margin:auto;  text=align:center; background: #f4f0e4 url(https://www.deadzoom.com/member/chappell01/alternatebackground.jpg); border-radius:32px; box-shadow: inset 1px 5px 8px 0px rgba(0,0,0,.5);">
<div style="max-width:600px; padding:25px; margin:auto; font-family:Comic Sans Ms,arial; background-color:FLORALWHITE; border-radius:16px; border:1px solid gray">


             <center>
              <font size="4" face="Comic  Sans Ms" color="black">
               <b>
                THIS LARGE HARDCOVER BOOK IS IN LIKE NEW  CONDITION.   AGES 4 - 12.
                <br>
                 FUN RECIPES!
                <br>
                <br>
               </b>
              </font>
             </center>


             <font size="4" face="Comic Sans Ms" color="black">
              <b>
               <p>
                <font style="FONT-SIZE: 12pt" face="COMIC SANS MS" color="steelblue">
                 "This is a fresh new-edition of this hugely popular cookbook featuring the characters of Apple Tree Farm. It is filled with scrumptious biscuits, cakes and other recipes such as cheese and tomato tarts, flapjacks, bread rolls and chocolate chip cookies which can be wrapped and given as gifts or eaten and enjoyed. Each recipe is shown in step-by-step instructions with full color illustrations.
                </font>
                <font style="FONT-SIZE: 12pt" face="COMIC SANS MS" color="steelblue">
                 "
                </font>
               </p>
               <p>
               </p>
              </b>
             </font>


             <p>
              <i>
               <font size="4" face="Comic Sans Ms" color="black">
                <b>
                 <br>
                 <font style="FONT-SIZE: 16pt" face="monotype corsiva" color="steelblue">
                  <br>
                  <b>
                   <font color="black">
                    <br>
                    <a href="https://www.ebay.com/sch/i.html?_ipg=200&amp;_ssn=chappello1&amp;rt=nc  ">
                     <font color="black">
                      Click Here to see my other  auctions
                     </font>
                    </a>
                    <br>
                   </font>
                   <font color="ffff99">
                    <a href="https://stores.ebay.com/BOOK-FAIRIES">
                     <font color="steelblue">
                      Visit Our Children's Book Store
                     </font>
                    </a>
                   </font>
                  </b>
                 </font>
                </b>
               </font>
              </i>
             </p>


</div>
</div>
<br>
</div>


 

[chapeau-noir]

@chappello1  Try using the viewport meta tag:  <meta name="viewport" content="width=device-width, initial-scale=1" /> for instance.  That should scale your text to mobile.

You can research "viewport meta tag" to learn more about it.

[chappello1]

Thank you so much. Will give it a try!

[chappello1]

Worked beautifully including gallery!  So grateful!

[retro_entertainment_collectibles]

Can use tables you just don't want use fixed sizes, use percentiles not that tables are "coding" appropriate these days for layout, they are for tabular data, that was always the intent.

Encapsulating "Divisions" (DIV) inside Divisions is the simplest way to make for a responsive design.

Responsive design never has fixed widths as the idea is have the web browser "figure it out" so if I'm on a Laptop with a width of 800 pixels,  a PC or TV monitor with a width of 1920 or say 4K (4096 pixels) or mobile device whereby horizontal resolution (width) can change simple by holding the phone in portrait or landscape mode the browser is doing the sizing work for the person.

Sizing fonts is generally consider bad design as many people set their cellphones to fixed font sizing due to eyesight problems.  Thus its better to actually use an <H> element for Headline (as is intended) than going fixed font size  (H1-H6) as again it lets the web browser do the rendering based on the output device.

[shipscript]

@chappello1 

I'm not fond of the gallery color (I suspect a premade was selected). 

https://www.ebay.com/itm/266434511365

You are probably more familiar with color names than color values, but you can easily change the gallery colors either in the tool that created the gallery, or in the code itself. I'll direct you to the code itself for your existing listing.  Note that the %23 is URL-code for the # symbol, which designates an HTML hex color code. 

The code for the gallery includes this segment to designate 4 colors:

c=%23EBC078_%23403020_%23F7F5D0_%23000000

 I would recommend changing the color codes to this:

c=transparent_%23555555_%23f6f0e4_%23000000

That will change the gallery background from orange to transparent. The heading will change from dark brown to a charcoal gray (#555555), the background of each item will be a slightly darker color than your description background (#f6f0e4), and the cell text will remain black (#000000). 

If you create a new gallery from the tool, the same color selections would be:

• transparent   (Gallery Color)
• #555555          (Heading Color)
• #f4f0e4             (Cell Background)
• #000000         (Cell Text Color)

Please note that if you add a custom gallery to your listings, the gallery is static and will not update as items sell. You would need to manually update the gallery every so often.

There is an online tool that can help you remove your galleries in bulk by preparing a spreadsheet that you can upload to Seller Hub.  That same tool could also replace your galleries in bulk.

https://www.isdntek.com/ebaytools/ActiveContentEditor.htm 

In fact, the same tool could also help you bulk replace all of your listing "table" codes with the DIV codes, but the unique backgrounds for each listing would need to be dealt with separately. Nonetheless, listings that share the same background image can be identified with yet another tool.

[shipscript]

@chappello1  

Because your items are books, I thought you might enjoy this test listing:

https://www.ebay.com/itm/223271911350

Click the album cover in the description to start.  I don't know how it will perform on mobile, as I haven't checked. Nonetheless, it was a fun scripting project that dates back a dozen years to when I was automating a tabloid for an overseas publishing outfit, and then later decided to see if I could convert the script to pure CSS after eBay's ban on active content.   I don't see an application for eBay listings, but that doesn't detract from the fun. 😊