Image Width

— Please, can I get an answer from Aizaz or Artem? I wasn’t happy with the quality of Elises support several times —

Hi Aizaz and Artem,

In theme settings you can choose product image size to be small, medium or large. This only has effect on desktop screens. On tablets image size doesn’t change. Please see sceenshot to see what I mean.

I want the image size on tablets to be small, because now I don’t have enough space for the short product description on smaller screens right now.

Can you help me?

Kind regards,

Attachments:

You must be logged in to view attached files.

Hi,

By adding the following custom code to the Tablet Custom CSS area in Theme Settings you can tweak your product content and image width on a tablet device. The main rule that width needs to be set only in percentage and in total it must contain 100%.

.single-product-page .product-image-summary-inner .product-images {
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}

.single-product-page .entry-summary {
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}

Regards

I’m sorry man. I’m not talking about making te right sidebar smaller. I’m talking about making the product image smaller so my text column is broader. This snippet doesn’t give the text part in the middle more space due to a smaller product picture on the left.

Following custom code provided in previouse reply is suppose to change width of product gallery (.product-images) and product descriprion (.entry-summary) and it not related to the single product sidebar.

You can check your site single product horizontal tablet layout with custom code and without on the following video (https://gyazo.com/24d0e1d7a8f04fa383b1aa4ef69124b0).

If you need to increase your description size more you can change numbers in custom code to the 70% and 30%, 80% and 20% and etc.

.single-product-page .product-image-summary-inner .product-images {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.single-product-page .entry-summary {
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%;
}

It will look like on this screenshot (https://prnt.sc/swiwrf)

Regards

I’m sorry. You’re absoluteluy right. I must have done something wrong. Thanks for your time. You can close the ticket.

You are welcome!

[Author]

Posts