10-27-2018 08:29 AM
Hey guys,
I'm stumped. I've spent countless hours writing HTML/CSS from scratch to make sure my listing would be responsive and mobile friendly. All was well with all of my tests until I posted the listing. The description, which is customized with HTML/CSS is showing up wider than the screen on my iPhone 7 Plus. Every element and image is set to display at 100% screen width.
The thing is, it displays correctly in eBay’s mobile view tester. I've also tested all the code on a webhosted server and confirmed it displays just as I intended on my mobile phone.
Can anyone shed some light on why it is displaying differently on eBay versus anywhere else I view it on my phone?
Any advice is much appreciated. Thank you!
-Shane
Solved! Go to Best Answer
10-28-2018 09:14 AM
As you say, the page functions correctly outside of eBay.
So let's take a look at the page that eBay delivers.
https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=142987179259
The delivered page is wrapped in eBay codes, including table code. As you may know, a <table> does not function the same way as a <div> because a table cell will expand in deference to the size of hard content within, whereas a div can constrain the size of included content.
Instead of stating a width:1000px and then a max-width:100%, state your dimensions the opposite way: width:100% and then max-width:1000px. This will will make that hard content "soft" for the table.
Include eBay's table around your code during development to make sure you capture all of those issues.
10-27-2018 04:19 PM
I'm not sure if this will help. But you can't have any active content on your listings anymore. Here is the anouncement from last year.
https://community.ebay.com/t5/Announcements/Get-Your-Listings-Compliant-with-Active-Content-Updates-...
10-28-2018 03:03 AM - edited 10-28-2018 03:06 AM
(this topic is really the domain of @shipscript but I'll take a flail at it)
You have a "<meta name="viewport" content="width=device-width, initial-scale=1.0>" tag in your page source, but all that does is tells the website to start with a zoom factor of 1 (full size), and fit any flexible page components to the device width.
It does not do anything about scaling gigantic photos, and there really is nothing that does.
Why it only displays badly on ebay.com? Maybe it is that meta tag. Tells ebay servers not to scale the content and it shows full size and scrolly on phone, and when hosted elsewhere tag isn't there and phone handles the presentation natively? (really guessing here)
In short, you can't have gigantic photos in there like that without a small screen scrolling (other than setting the initial-scale to 0.25 or some such and having the page load on devices zoomed out to fit the images to the page).
My understanding is that for total compatibility and compliance you should have no fixed objects (images, banners, tables, etc) larger than 320px wide.
I believe shipscript demonstrated a CSS method for implementing galleries that might do what you are trying to do somewhere around here. Hopefully, having been tagged above, shipscript will arrive, and she can school us both. In the mean time, you could poke around in shipscript's post history and look for one or more posts that contain tidbits on this subject
https://community.ebay.com/t5/forums/searchpage/tab/message?filter=authorId&q=gallery&sort_by=-topic...
I believe she also has a tool available to help create a compliant gallery:
https://community.ebay.com/t5/Member-To-Member-Support/additional-photos-40/qaq-p/28327976/comment-i...
http://www.isdntek.com/csstools/photos.htm
It isn't an active content issue, just a "1500px giant photos" issue.
10-28-2018 03:49 AM
Thanks for the replies!
@berserkerplanet, I am extremely grateful for your advice. Thanks for taking the time to write up such a helpful post and for sending up the bat signal. 😉
You've helped me look at my listing from a fresh perspective. I've been scrambling ever since I posted it trying to figure out what I did wrong. Before posting the live listing, I tested the code on every browser I could and ran it through multiple CSS, HTML and mobile view checker tools. I was really blind sided when the listing didn't display properly.
The 1500 pixel images is something I missed. I guess I forgot they were so huge because I was used to seeing them scaled down by the CSS rules I set.
After a little break I will take a look at the links and research some of shipscripts posts as you suggested. I just finished a 4 hour stint of messing with the code trying to get this figured out. My brains are basically oozing from my ears, lol.
Thanks again for the help!
10-28-2018 04:05 AM
10-28-2018 09:14 AM
As you say, the page functions correctly outside of eBay.
So let's take a look at the page that eBay delivers.
https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=142987179259
The delivered page is wrapped in eBay codes, including table code. As you may know, a <table> does not function the same way as a <div> because a table cell will expand in deference to the size of hard content within, whereas a div can constrain the size of included content.
Instead of stating a width:1000px and then a max-width:100%, state your dimensions the opposite way: width:100% and then max-width:1000px. This will will make that hard content "soft" for the table.
Include eBay's table around your code during development to make sure you capture all of those issues.
10-28-2018 09:31 AM - edited 10-28-2018 09:33 AM
>>Instead of stating a width:1000px and then a max-width:100%, state your dimensions the opposite
>>way: width:100% and then max-width:1000px. This will will make that hard content "soft" for the table.
Good to know. @shipscript
But does that deal with the 1500x1500 images, or are they a non-issue? Does the viewport tag deal with the large images?
(BTW, I can't remember if I asked: should I tag you on replies, or are you "in the loop" once in a thread?)
10-28-2018 09:52 AM
I've set my forum preferences to be notified on topics where I have responded. I'll usually take a look unless it's a runaway thread.
The image sizes don't come into play for fit because they are sized by the CSS code for the gallery. Their size would, however, affect load times. For instance, let's look at these two images, one on eBay and one externally hosted.
eBay's photo is 902px × 997px @ 136 KB:
https://i.ebayimg.com/images/g/yzQAAOSwfB9b1aKg/s-l1600.jpg
The external photo is 800px × 800px @ 381 KB:
https://image.ibb.co/nPmpVq/02b.jpg
eBay's slightly larger photo is less than half the load time because it has more compression.
When a listing will be posted as "good til cancelled", I like to suggest uploading the photos to eBay and then using eBay's photos down in the description. That way the photo is already cached in the visitor's browser when they load the listing, and eBay does their best to compress. However, this is a manual operation not suitable for automated listing processes.
Some sellers specifically include their own hosted photos to get around eBay's compression, sharpness, and size constraints, and know that their buyers will tolerate the lag and load.
10-28-2018 10:47 AM
10-28-2018 03:59 PM
No pinging protocol here. If you want my attention, just tag me. Then I know you are asking me a question. Otherwise, I may return to post that has a new comment, but might not get to it for a while.
"Are load times really an issue these days?"
Fiber would be splendid, but I doubt that the majority of users have access to fiber. I suspect most are on shared cable. I am on a local Wi-Fi tower. Speeds vary, and can become quite slow during some times of the day or year (depending on sun angle, air quality and moisture, cloud ceiling, and various other unknowns like the height and species of grass near the tower). I also have tried a verizon cellular hotspot and an ATT cellular hotspot. Quality depends on line-of-site to a cell tower, where speed degrades as signal strength erodes. I suspect environmental issues also affect signal quality on those because they use radio signals just like the wi-fi tower uses a radio signal. The cellular connections also tend to throttle. I have no idea about throughput speed because all I see are the speeds between my computer and the router in my office (300Mbps), but not from the router to the tower, which would be considerably slower. Also, my Internet connections through the airwaves can go from great to klunky at any time for no apparent reason.
Those on landlines would have a more stable connection, aside from throttling.
10-29-2018 04:58 AM
Thank you soooo very much @shipscript!!
The relief I feel after fixing that listing is blissful! I can't believe it was that simple of a fix. I figured it was something to do with the code eBay added but didn't feel I was competent enough to wade through the code and identify the issue.
2 months ago I knew CSS only by name and basic concept. It's been quite the crash course. Especially getting that gallery to work. I am extremely grateful for your expert help and explanation.
A big thanks to @berserkerplanet as well!
10-29-2018 09:19 AM
You're very welcome. Learning new tools can be quite a treat until we hit a wall. I was glad it was something I could solve.