Image size in detail view

Hi satrix,

I can see that you’ve set the width of the image column to 200px, which on most screen sizes is smaller than the default of 35%. Why have you done this? With the width at 200px, some of your images are already taking up pretty much the whole space in the image column. As such, what you want to do is increase the size of the image column and decrease the size of one or both of the other columns, and then also remove the current maximum image sizes. You can do this with custom CSS. For example:

upcp-detail-image-div {
width: 50%;
}
.upcp-detail-image-div img {
max-width: 100%;
max-height: none;
}
.upcp-mid-detail-div {
width: 35%;
}

• This reply was modified 7 years ago by etoilewebdesign.

Hi,

thanks for the fast reply. the 200px was my solution to make it look “good”.

now i added your custom css. as you can see in the link. the first column with the image increased but the images still are in the same size (small) as before the change.

where is the mistake?

Thank you for the support.

Hi satrixk,

To make the images larger, can you try adding this code to the “Custom CSS” box (on the edit Catalogue page):

div.upcp-detail-image-div img {
    width: 95%!important;
    height: auto!important;
    max-width: none;
    max-height: none;
    margin: 10px 0;}

(I set the width as 95% and set a margin to give a bit of space around the images)