Category image not resizing properly in mobile view.

[20163749]

Hello,

 

I have an active prestashop website and it has just come to my attention that, when viewing on mobile devices, the category images do not load correctly. For example, the smaller the display screen, the more the image moves to the left to the point where most of the image is off-screen. When viewing on a computer or laptop moniter the placement is fine.

 

It is not the category image thumbnail I am referring to, but the 'header' on the category screen.

 

Could anyone assist me in correcting this? Is this a known problem, I've spent hours searching the forums but have been unable to find a relevant page.

 

Kind regards

Ryan.

Edited June 18, 2015 by 20163749 (see edit history)

[mickeyboy1]

Your current prestashop version and a link to your site will help others to assist you

[sierra80]

Any resolution to this issue? i am having the exact same problem

[Bilsborough88]

Hello,

 

I couldn't get anywhere with it. However, the issue sorted itself out when I upgraded to the latest version of Prestashop a few weeks/months ago.

 

I'm really sorry I can't be of more help to you.

 

EDIT: Apparently 20163749 is another username of mine, I didn't realise I had more than one log-in!

Edited February 3, 2016 by Bilsborough88 (see edit history)

[Mila_omni]

There is already a topic with the solution: https://www.prestashop.com/forums/topic/359149-solved-mobile-category-images/ but unfortunately the code didn't help me because it was showing the whole picture and the text was going out of it.

 

My solution was replacing in code the "right" with "left", so the zoom focuses on the left side (where my picture is blank and the text is visible).

 

If you want also to zoom to the left side of your category image, go to /themes/default-bootstrap/category.tpl and under content_scene_cat_bg replace the "right" style with "left". See the code below:

div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) left center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>