Change breakpoints?

Hi
first of all congratulations for your great theme.I made many changes but there are some things that I can’t handle. Look at the video link first

At the product page, everything looks perfect until the 768res. I want the same layout, with a fullscreen image for the tablet vertical mode (I am not sure, is it max 991px?) like the smaller devices.

Also at the second video, everything is perfect from high-resolution monitors until 1024 res which is where that starts the tablet landscape mode.After that, the image looks very small and I have large space on the left and the right side of the product image which is useless.I want to reduce that space and make the image larger for tablet landscape mode.

Recap:
The problem appears only in tablet vertical and landscape mode.Everywhere else the images look perfect.Please help me to solve the problem
Leonidas

Attachments:

You must be logged in to view attached files.

Hello,

We are glad to know that you considered using WoodMart for your web-site. I hope you will be happy with it.

Try to add the following code snippet to the Custom CSS area or tablet devices in Theme Settings to fix this issue.

div.product-image-summary-inner>.col-sm-4 {
    -ms-flex-preferred-size: 34%;
    flex-basis: 34%;
    max-width: 34%;
    width: 34%;
}

div.product-image-summary-inner>.col-sm-8 {
    -ms-flex-preferred-size: 66%;
    flex-basis: 66%;
    max-width: 66%;
    width: 66%;
}

Kind Regards
Xtemos

Please look at the images below and tell me if there is any solution for that

In other words, can we move the product detail below the image like we do on mobile phones under 768px?

You can use this code to make it in two rows

div.product-image-summary-inner, div.product-image-summary-wrap {
	flex-wrap: wrap;
}

div div.product-image-summary-inner>.col-sm-4 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}

div div.product-image-summary-inner>.col-sm-8 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
		margin-bottom: 30px;
}

Perfect.
Another question: look at the thumbnails.I believe that they are a little blurry.Maybe I have something wrong with the settings.

If you think they are blurry then you need to increase their size and regenerate all thumbnails.

Million thank you.You can close the ticket

[Author]

Posts