Mobile version, thumbnails not center aligned

  • Resolved alenahr

    (@alenahr)


    8 years, 5 months ago

    Hi,

    First of all I would like to thank you for such a great plugin. It’s of great use in our website.

    Recently one small problem appeared with the mobile version visualization of our products. All photos of products visualized in one single column are not center aligned but left aligned instead. Some products are on the left and some are “more on the left” depending on the product title which is center aligned but of different length.

    Is there any chance how to center the photos in mobile phone version? We would like to make our page as mobile phone friendly as possible.

    producirenchina.com

    Thank you and have a nice day.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Alen,

    This is happening because the thumbnails for the catalog overview mode are just made to float left and fit as many across as the screen width allows. I played around with the window size on your site and it would seem that it jumps to one column of thumbnails at a width of 620px. With that in mind, you could probably just write a media query that affects the styling of these thumbnails. Something like the following would probably do the trick:

    @media screen and (max-width: 620px) {
.upcp-overview-mode-item {
margin-right: 0;
margin-left: 50%;
right: 120px;
}
}
    Thread Starter alenahr

    (@alenahr)

    Hi,

    Thank you very much for your time!

    I used the code you have provided in catalog CSS but unfortunately nothing has changed.

    Could you please check?

    Thanks a lot.

    Alena

    Hi Alena,

    As you didn’t give us an exact link to the page, the fix we gave above was for the main catalogue page (e.g. https://producirenchina.com/index.php/catalogo-de-produccion-de-indumentaria-hombre/).

    If you meant something like this page: https://producirenchina.com/index.php/catalogo-de-produccion-de-indumentaria-hombre/?categories=3 , here is some CSS that should target the images in mobile:

    
@media screen and (max-width: 480px) {

.upcp-thumb-item {
width:200px!important;}

.upcp-thumb-image-div a {
   display: block;}

}
    Thread Starter alenahr

    (@alenahr)

    It works! Thank you so much. It looks much better now!

    Great support!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile version, thumbnails not center aligned’ is closed to new replies.