cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Listing Is too big on mobile!

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

Message 1 of 12
latest reply
1 BEST ANSWER

Accepted Solutions

Listing Is too big on mobile!

@goldstar.bargains

@berserkerplanet

 

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.

 

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

View Best Answer in original post

Message 6 of 12
latest reply
11 REPLIES 11

Listing Is too big on mobile!

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

I've reached that age where my brain goes from "you probably shouldn't say that." To "what the heck, let's see what happens. "
Message 2 of 12
latest reply

Listing Is too big on mobile!

(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.

Message 3 of 12
latest reply

Listing Is too big on mobile!

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!

Message 4 of 12
latest reply

Listing Is too big on mobile!

Sure thing!

I was throwing stuff against the wall (I am no expert in mobile optimizations and don't care to be), and not 100% certain about everything said, but when shipscript rolls in here, we will be enlightened. (it's good to have true resident experts around 🙂
Message 5 of 12
latest reply

Listing Is too big on mobile!

@goldstar.bargains

@berserkerplanet

 

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.

 

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
Message 6 of 12
latest reply

Listing Is too big on mobile!

>>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?)

Message 7 of 12
latest reply

Listing Is too big on mobile!

@berserkerplanet

 

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.

 

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
Message 8 of 12
latest reply

Listing Is too big on mobile!

Ok. (I'll try to remember the pinging protocol this time)

Thanks for the tutorial. I'll have to look at it in depth later.

I was just asking because I had taken a quick look at OP's listing in an Opera Mobile emulator with an HTC One X profile (720x1280) and the listing body was far too wide and I ASSumed it was the images (but I pulled the image specs while looking at the description iframe on a 1920x1080 monitor in Firefox), and didn't look at OP's CSS.

Shows you how much I know about this topic 😞


Are load times really an issue these days? I'm on a 3 Mbps fiber connection which I find to be more than good enough for my (and the rest of the small office's needs), but which is considered stone age against 13, 50 , 100, and 1000 Mbps cable and fiber nowadays. Images like the ones you linked might be a half second burp* loading simultaneously. Are there that many still on 56k dialup or 512k DSL anymore where image loading would be a real issue?

*out of completeness I ran the built in profiler in FF52 browser loading those images individually: 515ms for the eBay hosted image and 1344ms for the externally hosted one. (with 10% of the pipe being used by another long but slow download in the browser). So my half second simultaneous load estimate was low.

My firewall Rx and Tx speed counters are too primitive and laggy to catch anything of use for something this short in duration, but some rough math shows each image download used pretty much all the 90% remaining of the network connection (no QoS here, and looks like no server side lag or throttling). So a gallery of 5 external images like that might take around 5-6 seconds to load. Not nothing, but livable at 3Mbps. Would suck greatly at 56K or even at 512K. Cutting that by a factor of 3 using the eBay hosted versions would make a difference.
Message 9 of 12
latest reply

Listing Is too big on mobile!

 

@berserkerplanet

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.

 

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
Message 10 of 12
latest reply

Listing Is too big on mobile!

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!

Message 11 of 12
latest reply

Listing Is too big on mobile!

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.

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
Message 12 of 12
latest reply