Jump to content

Archived

This topic is now archived and is closed to further replies.

ethendras

Thumbnails for products look odd on iPad

Recommended Posts

ethendras    1
ethendras

Website URL: http://www.alwaysbellagifts.co.uk/
Framework Version:  Latest - updated Jan 2014.
WordPress Version: Version 3.8.1
Plugins in Use: Jigoshop for Pagelines 1.4.7
Server/Host: GoDaddy
Screenshots: See description below.

Details:

 

Hi - hopefully this is a quick one. I'm using pagelines to display products on my site in a 4 images per row style.

 

These look fine in Chrome on a pc. However on an iPad it displays the images in an odd, random way. For example on http://www.alwaysbellagifts.co.uk/product-category/mothers-day/ it'll display the 13 product thumbnails in perhaps 3 images per row then 1 image hanging by itself underneath etc all the way down the page which my client doesn't like. But additionally some images are left aligned while others are central.

 

What's the easiest way to resolve this please so that they all follow each other? I haven't added any custom css to display the thumbnails in any particular way. The only thing I have done is to hide the .jigoshop #page a.button {display: none;}

 

The rest of the site is responsive and looks fine. It's just these odd looking product thumbnails.

 

Any ideas please? Thanks.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, looking in the source code it's jigoshop is setting the products in the row in to lists via 'first, next, last' etc. When the screen resizes and the elements move, the item listed last won't allow anything behind it so it keeps the next lot of products on the row below. Looks like this has been reported to jigo previously - http://forum.jigoshop.com/discussions/problems/10195-changing-the-number-of-products-per-row-and-products-per-page-in-catalog. Do you have the jigo sorting plugin installed as some people seem to find that was causing it.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ethendras    1
ethendras

Cheers James - thanks for the advice. No, I'm, not using the Jigoshop sorting plugin unfortunately. So cannot change use of that.

 

So i guess it's a case of modifying the correct plugin file somehow? Or would there be another way please using css?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, the only thing I think you could do would be edit the width of the product image so four fit on a line on the ipad using @media queries. Example would be something like the below, you've need to change the width:115px to suit so all four fit on the one line.

 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{

.products li {
    width: 115px;
}
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ethendras    1
ethendras

Fantastic - that css code works perfectly!

 

As always James, you've proved yourself to be an extremely helpful and knowledgeable guy! Thank you!

Share this post


Link to post
Share on other sites
James B    436
James B

Ah Excellent! Thanks, glad it worked :-) 


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×