Mobile site category/product images issue

[Sergey Pavlov]

Hello. I have Gravida theme with Woo Commerce plugin. I think there is a conflict of plugin and the theme on mobile version. Category, or other pages with two colomns of images are looks broken. For ex. 6 images on mobile version will not stay in two colomns and three rows. There is a blank spaces in the right colomn and you can’t click on image as several images of products got the same URL in mobile version.

Looks like CSS conflict is there.

[Forum Moderator]

Hi Sergey,

Kindly show us your website URL.

Regards,
Dave

[Sergey Pavlov]

Hello Shri,

Here is the link: http://www.paragoninteriors.ca/product/duke-pool-table/

Please check it in the mobile view. In the desktop version products pictures looks fine. Only the problem when you have two columns of pictures on small screen. For ex. http://www.paragoninteriors.ca/furniture/billiard-tables/paragon-pool-tables/

You can check any page with several pictures of products. They all have a
white space in the right column. You can’t click on some pictures on the
left as they all covered URL from the lowest image.

Thank you

Sergey

[Forum Moderator]

Hi Sergey,

Kindly go to Appereance>>Customize>>Custom CSS Box

Add this code:

@media screen and (max-width:767px) {
.products .last { float:left !important;}
}

Regards,
Dave

[Sergey Pavlov]

Hi Dave,
I did what you suggested. It works fine now! The mobile version looks right, no white spaces and images in two columns now.

Thank you for such good help.
Sergey

[Forum Moderator]

Okay great.

Regards,
Dave

[Author]

Posts