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

How to fix mobile viewport meta tag?

I bad in computer.How to fix mobile viewport?

Where to add special header code provided by ebay?Inside listing or somewhere else?

Thank you for your help!

Message 1 of 26
latest reply
25 REPLIES 25

Re: How to fix mobile viewport meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1"></font>
<style>
img {

max-width: 100%;
}
</style>

 

-----------------------------------------------------------------------------------------------

Please see above HTML code for the easy way to get mobile friendly, simply add this text to the end of your HTML and your all set. (Please note: this code is to fix IMAGE scaling in your description, and TEXT scaling in your description for mobile friendly use.  You may need to add other HTML if you have Forms or other javascript, CSS etc... but if you use those you probably already know how to do this, however if you need to you can do some research and simply add that code to the one's above.)

 

The first portion of the HTML is for Text scaling:

<meta name="viewport" content="width=device-width, initial-scale=1"></font>
<style>

 

The second portion of the HTML is to scale Images in your description:

img {

max-width: 100%;
}
</style>

 

If you are creating a listing one at a time:

- simply create your listing as usual. Then:

1.  Switch to HTML editor (if you forget this step, your HTML will appear how you see it written above as text in your description! )

2. Go the the end of the line of whatever HTML script has been generated for you and hit enter.

3. On the next line copy and paste the above HTML code.

 

VIOLA! You are now mobile friendly!

PS - it doesn't matter if you have text or images in your description, as long as this code is there, you may add  text or images at any time and  your listing will be mobile friendly. If you do not have images, the code simply WILL DO NOTHING AT ALL!   It won't hurt anything if the code is there and you DON'T have images in your description.

 

If you need to do this in bulk follow these instructions:
1. Open your first 1-500 and check off all items (you can only do 500 at a time)
2. after you have selected all 500 items, click: "Edit Fields" then "Item Description"
3. THIS IS VERY IMPORTANT!!!!! -----------------> Switch to HTML editor (if you forget this step, your HTML will appear how you see it written above as text in your description! )
4. SELECT ACTION------------->choose the selection: "Edit listings in bulk - add to item description"
5. Paste the above HTML directly after the break symbol <br>
6. click "save and close"
7. Submit changes

 

PSS - It doesn't matter where this code is in your HTML either, the only reason that I'm telling you to put it at the end is so you don't interupt other code you have there.  You can put this at the beginning before you start creating your listing if you want, it will work the same (In other words, if you later add to your description, you do not need to reposition the HTML, just leave it were it is, it's fine.)

 

Hope this helps!

 

 

 

Message 16 of 26
latest reply

Re: How to fix mobile viewport meta tag?

How do you go and remove the old code from all listings or do you have to do it 1 at a time?

Message 17 of 26
latest reply

Re: How to fix mobile viewport meta tag?

If you accidentally don’t switch to html how do you remove it from each ad. One at a time or is there a remove all button?

Message 18 of 26
latest reply

Re: How to fix mobile viewport meta tag?

To remove "old code" you will need to know what it is that you want to remove exactly. Select all your listings that you want to revise and click "Edit Fields" and them "Item Description" a window will pop up where you may edit your description just select the action: Edit listings in bulk - find and replace. This whill give you a window with two boxes, #1st box - type what you want to change and #2 box what you want to change it to.

Message 19 of 26
latest reply

Re: How to fix mobile viewport meta tag?

If you don't switch to HTML and you need to remove the code from your description you pretty much do the "Find and replace" action if you are doing bulk

Message 20 of 26
latest reply

Re: How to fix mobile viewport meta tag?

Great to see an answer with useable info. Thank you. I am writing after Auctiva was updated. I do have the Auctiva scrolling gallery at the top of my listings. Having trouble with the eBay "mobile friendly checker" and "megapoint viewer" fix on my listing page. Sometime it fixes, sometimes not. Question, should I insert the code above the Auctiva Scrolling Gallery Code, or between that and my listing description. Thank you very much!

Message 21 of 26
latest reply

Re: How to fix mobile viewport meta tag?

 

This thread is a year and a half old, and some unknowns in my earliest post are now resolved. Many answers can be found on the Active Content Forum.

https://community.ebay.com/t5/Replacing-Active-Content/bd-p/activecontent

 

@kbcate

The viewport meta tag can be anywhere near the top of your description, browsers aren't too picky about where they find it. It will inform mobile browsers that you have already made your content flexible, and thus, the mobile browser will not shrink the page to fit. Instead, it will allow your content to wrap of its own accord.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

If you fail to address page flexibility in your own description code, yet add this tag to your description, scrollbars will appear because the content won't be allowed to shrink to fit. This is something not described to users who blindly rely on eBay's tool.

 

The style code for images can be anywhere on the page. The code will attempt to make images shrink when the window shrinks, thus allowing the content to flex and fit into a mobile window. If you have no images, you don't need this code. If you have no images and add this code, it has no effect.

<style>img{max-width:100%;height:auto;}</style> 

The above bit of style code will work for most embedded images in simple listings, but probably won't work when there is a table of images. It also will not work for images that contain their own style codes, and should not be used in custom templates that use their own styling methods or separate stylesheets (the problem should instead be addressed directly in the stylesheet).

 

I looked at only this listing.

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

It is plain text, with no fancy HTML, so would normally not need any of the mobile friendly codes that eBay wants to add. However, since you have the Auctiva gallery, the meta tag should be included, while the image style tag can be omitted because Auctiva addresses their own images.

 

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

Re: How to fix mobile viewport meta tag?

@kbcate

 

I want to add that you don't need to use eBays "fix it for me" tool to add those tags to your listings. eBay's advanced description editor has an "Inserts" tool where you can construct up to five different code snips to insert at the cursor when you click the option. Take a look at those "Inserts" (advanced editing) and create one to insert the viewport meta tag along with any other routine info. Then place your cursor at the top of your description text and click the "Insert" option.

 

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

Re: How to fix mobile viewport meta tag?

@shipscript Thank you for all the information. I'm so not good at any of this, but love to learn and appreciate you sharing your knowledge. 

Message 24 of 26
latest reply

Re: How to fix mobile viewport meta tag?

@kbcate

 

I've added a screenshot on using the "Insert" feature on eBay's description editor:

https://community.ebay.com/t5/Replacing-Active-Content/Circumventing-eBay-s-Mobile-Checker/td-p/2835...

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

Re: How to fix mobile viewport meta tag?

THE CODE FOR THE VIEWPORT META TAB IS IN MY GOLD CARD AUCTION I WILL LIST IT NOW. IT IS SOMEONE FROM EBAY DOING IT A SECURE SOURCE TOLD ME.
Message 26 of 26
latest reply