Symmetry Theme - Adjust product page columns

Store Design
1

Hello,

I hope someone can help.

I’m using the Symmetry theme.

At the moment, the product page is set up as default, with the dividing line in the middle of the image and the product details.

I’m aiming to make the image side 30% page width and the product description side 70% page width.

All while keeping it fully responsive and balanced.

Any help appreciated!

2

@meepmedia - can you please share this page link?

3

Go to your Online store > Themes > Edit code > Assets > open style.css file, add this code at the bottom and save file

@media (min-width: 1040px) {
.product-detail .gallery  {
    width: 30% !important;
}
.product-detail .product-column-right { max-width: 100% !important; }
.product-detail .gallery-size-small+.product-column-right {
    width: calc(70% - 44px) !important;
}
}
4

Hi @meepmedia

Here are the steps:

  1. Click ‘Customize’ to open theme editor then navigate to a product page.

  2. Click “Product pages” section to open it’s settings.

  3. Set the Media > Size to “Small”. This will set media size “35%” and remaining width to product details.

  4. In order to make 30%+70% split for desktop screens only, paste the following code in the Custom CSS box.

@media (min-width: 1040px) {
  .product-detail .gallery-size-small {
    width: 30%;
  }
}
@media (min-width: 1040px) {
  .product-detail .gallery-size-small + .product-column-right {
    width: calc(100% - 30% - 44px);
  }
}
  1. Click ‘Save’ to save the changes.

Watch the attached video to see how i did it in my store. I hope this will help!

5

Perfect! Thank you :slightly_smiling_face:

1 Like
6

@meepmedia Very welcome