ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
1 BEST ANSWER
Accepted Solutions
Try your code here, since it uses the same sort of iframe as eBay
Add a fixed height to your template, as shown in red, and you can play with the height value in your template on zippypractice. If the amount of text in those boxes will change, then the height better be large enough to accomodate your various paragraphs. A fixed height is only a patch.
<br style="display:none">
<link href="https://bruceleeitems.com/a1/eBay.css" rel="stylesheet">
<link href="https://bruceleeitems.com/a1/index.css" rel="stylesheet">
<div class="listingTemplate" style="position:relative; height:800px;">
We are continuing this discussion from Q&A for a linear conversation flow.
https://community.ebay.com/t5/Tools-Apps/Incorporate-CSS-into-HTML-listing/qaq-p/28228322
https://community.ebay.com/t5/Tools-Apps/Incorporate-CSS-into-HTML-listing-Part-2/qaq-p/28235721
We started with a template that has text boxes at the top and a photo gallery at the bottom. But the photo gallery uses absolute positioning, so it is not nailed down to the page. Without being grounded on the page, it can not hold the page open. That is why we see only the text boxes and not the photo gallery on eBay's page.
The alternative to absolute positioning, where an element is mapped to its container with top and left offsets, is to use relative positioning where an element is rendered inline in the order it appears in the code.
However, in your code, the gallery comes first and the text boxes come last -- the opposite of the order they appear when rendered on the page. So absolute positioning has been used for the gallery to move it from the top to the bottom.
With the gallery floating due to absolute positioning, there is nothing after the gallery to hold the page open, and the gallery itself does not hold the page open.
I think it not wise to continue down this code path because we are going to have to change too much to make the code work and then to make it mobile friendly. I think we should back up and start with a framework that will get you there faster and require less modification.
If you want to discuss this starter template, I can walk you through the reasons for making the various choices:
http://shipscript.com/test/jlpereira/jlpereira_template001.html
Okay, this was strange....I could not move the scroll bar with my mouse, but clicking in the window, and using my keyboard arrow up and down, it scrolls.....
Unfortunately, it will perform the same way on ebay. The user will need to scroll the short window slot to get the photo gallery to appear. We can work up a solution, but we'd just have to abandon it to make the page mobile friendly.
The absolute positioning is doing that to you. As mentioned, we can work up a patch (and it would be only a patch), and then you would still need to rework the entire thing for mobile.
If your text will always be the same height, you can define the height of the container. Or if we know how tall that gallery will be, we can add a margin to the bottom of the template. Somewhere, we need some content that does not use absolute positioning, and it looks like most of the elements in your template use absolute positioning.
Try your code here, since it uses the same sort of iframe as eBay
Add a fixed height to your template, as shown in red, and you can play with the height value in your template on zippypractice. If the amount of text in those boxes will change, then the height better be large enough to accomodate your various paragraphs. A fixed height is only a patch.
<br style="display:none">
<link href="https://bruceleeitems.com/a1/eBay.css" rel="stylesheet">
<link href="https://bruceleeitems.com/a1/index.css" rel="stylesheet">
<div class="listingTemplate" style="position:relative; height:800px;">
Let me explain this alternative code.
http://shipscript.com/test/jlpereira/jlpereira_template001.html
Because of the way table code functions, if any of the content is too large for the cell, the table cell will not shrink, and that is not good for mobile. But one of the benefits of a table is that all the cells in a row will maintain the same height for a uniform appearance.
So, because of the way you have those two text cells at the top, we probably want a table appearance for desktop and then abandon that table appearance on mobile.
Here is the basic code block. I have removed the photo gallery because that is a monster all by itself. We just want to look at the basic skeleton and make it flex as necessary.
I've added comments in red:
<style>
#template {
max-width: 700px; /* allow shrink, but no wider than 700 */
margin: auto; /* to center the template in the page */
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 16px; /* we always standardize the base size here and change elsewhere */
text-align: left;
line-height: normal; /* eBay fiddles with this, so we redefine it for our page */
}
#template * {box-sizing:border-box; } /* this standardizes how padding and borders affect sizes within this template */
#template h1 { /* text heading at the top */
border: 1px solid #555;
color: white;
padding:.2em;
margin: 0px 4px;
text-align: center; /* centered heading */
background-color: #2E6DA3;
background-image: linear-gradient(#3379B6,#245580); /* shading from blue to darker blue */
}
#template h3 { /* heading inside text boxes */
color: #345;
margin:0;
}
.toptable { /* element pretends to be a table */
display: table;
border-spacing: 0px .5em; /* same as table cellspacing, but we set only vertical */
margin: 4px;
}
.toprow { /* element pretends to be <TR> table row */
font-size:.9em;
display: table-row;
padding: 1em;
}
.cell1,
.cell2 { /* both cells act like table cells <TD> */
display: table-cell;
margin: .5em;
vertical-align: top;
background-color: #ddeeff;
background-image: linear-gradient(#F9FAEC, #F6EEDD); /* background color shading */
padding: .8em;
border: 1px solid #777;
}
.cellgap {width: .8em; } /* table cell spacer in lieu of horiz cellspacing */
.footer { font-size:.9em; font-weight:normal; } /* blue bar at bottom */
/*
here we change from table format to div format
for a page that is narrower than 640 px.
The cells are no longer side-by-side and are forced full width, one below the other
*/
@media (max-width:640px){
.cell1, .cell2 { width:100%; margin:.5em 0px; display:block;}
.cellgap { display:none; }
.toptable { border-spacing:0px; margin: 2px;}
#template h1 {margin: 2px;}
}
</style>
<div id="template">
<h1 class="heading">SAMPLE TEST HEADER</h1>
<!-- this begins the table section -->
<section class="toptable"> <!-- this takes the place of TABLE -->
<div class="toprow"> <!-- this is the TR -->
<div class="cell1">
<h3>Cell 1</h3>
<p>This is text filler that is useful for formatting content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p>
</div> <div class="cellgap"></div>
<div class="cell2"> <h3>Cell 2</h3>
<p>This is text filler that is useful for formatting content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</section> <!-- this ends the table section -->
<!-- the photo gallery will be added here -->
<br>
<h1 class="footer">photos © seller</h1>
</div>
Of course, once you start using a complex template, you'll need to add the eBay mobile summary tags so that ebay will pick up the correct description to display to other shopping venues. You'll want to decide how and where to manage that. How you plan to merge the summary and description will slightly affect how your template is designed.
You are welcome to post back with more questions at any time. 
