How to adapt the header width for mobiles?

Hello,
I am working in order to make all listing mobile friendly since the new rules of ebay. The problem is that I am using an header which is too big (actually it is only for the mobile phone, bot for computers)… so, is it possible in some way to adapt it? I mean, I don’t want to resize the image, I would like to do a sort of responsive image… maybe @kristian has any ideas?? I am using pro: urban.

Thank you

Hi,

could you post a link to one of these listings and also describe more specific how exactly the background image should be handled on mobiles?

Regards, Kristian

@kristian This listing is mobile friendly http://www.ebay.it/itm/Leopoldo-Mastelloni-attore-regista-e-cantante-italiano-Press-photo-Cinema-CBBB4-/282415531674?hash=item41c147069a (I checked the iPhone optimization in advanced tab). However, if you check the listing with ebay tool this is the result: http://www.i-ways.net/mobile-friendly/it/result/282415531674/EBAY-IT . As you read, there is something too large. If you check from mobile, the header (the logo in top) is too large, but I don’t understand how to make it responsive… have you got any idea?

Thanks again

It’s strange that you get an error there but it’s not the header image that is causing this. On this google test page, everything is fine:
https://search.google.com/search-console/mobile-friendly?hl=de&id=j4SEZeTGIBEbujCAcjsShw
I also checked your code but didn’t find any suspicious.
Maybe it has to do with the content of your info boxes? You entered custom HTML code, e.g. mayn of tags like these:

<html>
<head>
<title></title>
</head>
<body>

and:

</body>
</html>

You should remove them all.

Regards, Kristian

Hello @kristian ,
mmmh you are true, I used some of those tags. I will try to change them… do you know how can I do the 2 separate columns as you see without using those tags?
Anyway, if the problem is not the header, why is it cut and not complete?

Thank you

I use those tags also in the slogan:

<html> <head> <style type="text/css"> .link { font-family: times new roman, arial; font-size: 20pt; color: #FFFFFF; text-decoration: none} .link:Hover { font-family: times new roman, arial; font-size: 20pt; color: #ff0000; text-decoration: none} </style> <title></title> </head> <body> <a href="http://stores.ebay.it/ilcantucciodelcollezionista" class="link"> <em>Visita il negozio! — Visit our store!</em> </a> </body> </html>

How can I write it without using those tags??

As I stated out in my previous post you could try to remove the mentioned HTML tags. You can keep the rest.

Regards, Kristian

Hello @kristian ,
I really thank you for your help!! I did as you suggested, deleted those tags but it still seems there is something wrong http://www.i-ways.net/mobile-friendly/it/result/282415531674/EBAY-IT . I attach a screenshot of how my listing is shown using an iPhone. As you see, the header image is not complete and left and right borders are cut. How to solve this? Reading the red warning I-ways gives me, there must be a problem with a “fixed” object. The only one is (I suppose) the header… any way to solve this issue?

I take the opportunity to ask you also another important thing. Until now, I saved the header and background images in tinypick, but I would like to change since I am worried one they it will expire. How can I use my dropbox? Now I saved those images (background and header) and pasted the link, but it seems not to work… any help will be extremely grateful!!!

What you could try is to remove the info boxes with your custom code, revise the listing and test it again. (You can re-add the info boxes afterwards)
This way you can test whether your custom code is causing the red warning.

Maybe it has to do with your non-breaking tags &nbsp; that you added multiple times. Try to remove them.

Yes, your custom background images gets cut off but it’s a background image = it won’t cause scrollbar/oversized content.

DropBox is a cloud storage service not a website/image hosting service. You can’t/shouldn’t use it for image hosting. Instead you better go with your own webspace.

Regards, Kristian

Hello @kristian ,
thanks again for your help!
I have tried, the matter is inside the info boxes, removing them the report is fine without error. I will try to remove that tag and see if it has still the problem.

How can I avoid that the header Is cut (not the background, I mean the image on the top)?

Mmmh I need to find a solution, if really dropbox is not possible to use…

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.