Reducing width of Product page

I'm fairly new to OpenCart and I've been searching days on either:
(1) how to reduce the width of the product page (my preferred solution), or
(2) how to reduce the size of the product image.

I'm using OpenCart 2.3.0.2. My product page has two columns in a 60/40 split and the image on left-hand-side is too large.

I have tried reducing the values in "Extension" > "Theme" > "Images" section > "Product Image Thumb Size (W x H)" but this only reduces the image pixels (so the images become more blurred); the image size on the product page remains the same.

The reason I prefer a solution related to (1) is because I have product description tabs at the bottom of the page, and I would prefer to reduce the width of the text (see the attached screenshot). I have used a div container with a max width of 800 pixels, but there's a lot of empty space on the right that doesn't look great.

Any help on how to reduce the image size or the product page width would be great.

Thanks in advance!

Simon

Your Custom Theme uses it's own Image Sizes, and if you SET your
Product Thumbs to i.E. 150px width, in the Admin Image Settings, your
Theme may blow up that THUMB, if the Product Page is called to display
it in a 'certain' Size, wich is larger than the Cached image Size.

One should therefore make sure, to always have the Images CACHED in
the MAX-Size Value used, so, they always only have to be reduced in Size, but
NEVER enlarged, and so visually damaged at best.
---
The Product Page Image Size may also be set automatically, depending
on Browser Resolution.
On a responsive product.tpl File, this could look about like this: Lines like the above exist in a responsive product.tpl file, defining the
(i.E. image-) SECTION width, of a TOTAL of 12 Column-Sections per Row,
and may differ in Size, depending on the Browser/Phone Screen Resolution.
---
A Line like this:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
tells you this: Just to give you an idea on this.
---
And on a Product Page, usually 2 such Sections exist, the THUMB on
the left, and the Details&Prices on the right. The MAIN FRAME Class therefore
split's the Content into 2 Main Sections, always displaying 2 Sections, exept
for the smallest XS Resolution, where it changes to full width: ---
To change this 1:1 ASPECT, one could enlarge the left THUMB Side
to: col-md-7 col-lg-7
and then shrink the right Side to: col-md-5 col-lg-5
or then do the Contrary, to again get a total 12 Column width.
BUT ATTENTION, this could have some impact on any content starting from
BELOW the Thumb Section as well.
---
https://www.google.com/search?q=col-lg- ... s+settings
---
If you don't understand, you probably have to contact the Theme Seller.
Good Luck!
Ernie
---
PS: In Bootstrap Featured/Special/Latest/e.t.c. Admin Settings, Image Size are
likely definded/declared today by th SPAN-Value, as shown on the Image below, just to mention it!
---

Many thanks for the reply.

Is there a way to reduce the max-width of the product page, without changing the general page width of the store? That would automatically reduce the image size and the width of the tab descriptions at the bottom of the page.

Well, nothing is impossible, but without Facts and Figures, it only guessing...
it's a tech place here, but you so far did not even mention a Link, Version and/or Theme,
so, what do you expect ?
Ernie

The OpenCart version is 2.3.0.2 and I'm using a Journal theme. The website isn't live yet until I can crack the product page width issue.

Thanks

Sorry, but I am not familiar with paid Journal Themes.
You may better contact journal-themes.com:
https://support.journal-theme.com/
Good Luck !
Ernie

it can be solved like this in v 3
in: catalog \ view \ theme \ "your theme" \ template \ product
edit: product.twig
ca arata asa
https://ibb.co/LSXPNsR
https://ibb.co/tYC67w3
file :product.twig

simon.p.anderson wrote: ↑

Sun Sep 10, 2017 1:05 am

I'm fairly new to OpenCart and I've been searching days on either:
(1) how to reduce the width of the product page (my preferred solution), or
(2) how to reduce the size of the product image.

Any help on how to reduce the image size or the product page width would be great.

Thanks in advance!

Simon

THEME settings
Reducing the content div will give you less width
@media will determine the width also according to screen size.
So its not just a case of changing one thing. It can all be done with css.