Support » Plugin: Product Catalog » Image size in detail view

  • Resolved satrixk

    (@satrixk)


    Hi,

    we´re using the Pro version and we´re working mainly with the detail-view for the catalogues.

    My problem is the size of the image on the left. I want to enlarge it a lot. (min. double size. it doesn´t matter what i change in the settings at some point the picture stay at the same size when i increase the width/height value e.g.

    As you can see, there is a lot of space in the pricing column so this should not be a problem.

    thanks for help

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor EtoileWebDesign

    (@etoilewebdesign)

    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%;
    }
    

    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.

    Plugin Contributor EtoileWebDesign

    (@etoilewebdesign)

    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)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image size in detail view’ is closed to new replies.