Close

Detail Image Container Size

JayC
8 years ago
#10471 Quote
Avatar
  • 14
I'm able to change the image size on the product detail page but all it does is make the image smaller and not adjust the page to the new size of the image.

How can I change the image container size so that everything else gets moved up a bit.
hristo
8 years ago
#10473 Quote
Avatar
  • Moderator
  • 172
Hi,
the size of the left and the right pane on product-details page is controlled by two classes - "gallery" and "overview"

The gallery is set by width, and the overview is set by margin. In order to change their appearance you have to edit the values of the width and margin properties for these classes. There are two instances - for tablet landscape resolutions and for desktop resolutions. To edit the first instance go to your 768.css file and find this code:

.gallery {
    float: left;
    width: 430px;
}

and this code:

.product-details-page .overview {
    margin-left: 440px;
}

Edit the width and margin values to achieve the look you are after.

To edit the second instance (for desktop resolutions), go to your 980.css file, and find this code:

.product-details-page .gallery {
    width: 580px;
}

and this code:

.product-details-page .overview {
    margin-left: 590px;
}

Edit the width and margin values again to the appearance you need.

Please make backup of your files before editing.
Regards,
Hristo Gospodinov
Nop-Templates.com
JayC
8 years ago
#10474 Quote
Avatar
  • 14
Great! Thanks!!