Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by lim211 (see edit history)
Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

  • 3 years later...
  • 1 month later...

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 by przemex (see edit history)
Link to comment
Share on other sites

  • 6 months later...
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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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?

 

thumb_ver.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...