Image in product description can not be resized to fit mobile device

[lim211]

I insert some images (800x800) in product description, but they could not be resized to fit mobile device (see picture below), how to solve this problem? Any help? Thanks

[Dh42]

You would have to know a bit of html / css to do this. You can put them in a div container that nests inside of the description that uses % to set the width, that should automatically scale them.

[gabdara]

The simplest approach would be to click on the first button of the BO text editor (Source code), find your img tags and add class="img-responsive".

[lim211]

The simplest approach would be to click on the first button of the BO text editor (Source code), find your img tags and add class="img-responsive".

 

Thank you , I did this way before, but too many jobs because there so many images for each products.

[lim211]

You would have to know a bit of html / css to do this. You can put them in a div container that nests inside of the description that uses % to set the width, that should automatically scale them.

 

yes, I've added following  code to the file  shop/themes/default-bootstrap/css/global.css , but still does not work, anything wrong ? Thank you！

.page-product-box .rte img{
    display: block;
    max-width: 100%;
    height: auto;}

Edited June 20, 2016 by lim211 (see edit history)

[gabdara]

yes, I've added following  code to the file  shop/themes/default-bootstrap/css/global.css , but still does not work, anything wrong ? Thank you！

.page-product-box .rte img{
    display: block;
    max-width: 100%;
    height: auto;}

 

That should work, have you cleared the browser cache? Or maybe there's another css rule that overrides yours.

[ender666]

any idea how to modify 1.7 classic template to fit images on mobile? (using full width product description tab).. thank you.

[przemex]

did you solve the ender666 problem ??

[przemex]

However, I succeeded I edited the template's css file

../themes/classic/assets/css/theme.css

and added img in the tab-content> item
img {
     display: block;
     max-width: 100%;
     height: auto;}

after modification, the code looks like this in this passage

tab-content>.active{display:block;}
img{
    display: block;
    max-width: 100%;
    height: auto;}
.navbar{position:relative;padding:.5rem 1rem}

I checked the presta 1.7.6.1 version on  standard template with the description window enlarged to the full window according to my description

https://www.presta-polskie-wsparcie.pl/strona/presta-1-7-szersze-pole-opisu-produktu

 

 

Edited November 14, 2019 by przemex (see edit history)

[technico2006]

On 11/2/2019 at 6:57 PM, przemex said:

However, I succeeded I edited the template's css file

../themes/classic/assets/css/theme.css

and added img in the tab-content> item
img {
     display: block;
     max-width: 100%;
     height: auto;}

after modification, the code looks like this in this passage

tab-content>.active{display:block;}
img{
    display: block;
    max-width: 100%;
    height: auto;}
.navbar{position:relative;padding:.5rem 1rem}

I checked the presta 1.7.6.1 version on  standard template with the description window enlarged to the full window according to my description

https://www.presta-polskie-wsparcie.pl/strona/presta-1-7-szersze-pole-opisu-produktu

 

 

Hello, I tryed this, but didn't work... (presta 1.7.6.3)

Is there any other solution to this issue?

 

Thank you

[przemex]

It works, but the css edition alone is not enough, you still need to edit the themes / classic / templates / catalog / product.tpl file here you have the solution

https://www.presta-polskie-wsparcie.pl/strona/presta-1-7-szersze-pole-opisu-produktu

at the top for a version newer than 1.7.0.5, i.e.

at the very top for the latest presty version

Szerszy opis produktu dla wersji powyżej 1.7.0.5

[LesterJW]

Hi,

Sorry to bring this old back and thanks for the code on how to make full width on product description and fitting the images on mobile browser. I'm running on the latest prestashop 1.7.8.5 default theme, by following your code eveything work but the image thumbnails now listed in vertical. Any idea what was wrong?