Jump to content


Photo
- - - - -

Thumbnails for products look odd on iPad


  • Please log in to reply
5 replies to this topic

#1 ethendras

ethendras

    Member

  • Members
  • 13 posts
  • LocationNorthamptonshire, UK
  • Country: Country Flag

Posted 11 March 2014 - 10:39 PM

Website URL: 

Please Login or Register to see this Hidden Content


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 

Please Login or Register to see this Hidden Content

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.



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2014 - 01:16 AM

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 -

Please Login or Register to see this Hidden Content

. Do you have the jigo sorting plugin installed as some people seem to find that was causing it.



#3 ethendras

ethendras

    Member

  • Members
  • 13 posts
  • LocationNorthamptonshire, UK
  • Country: Country Flag

Posted 12 March 2014 - 08:42 PM

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?



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2014 - 11:59 PM

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


#5 ethendras

ethendras

    Member

  • Members
  • 13 posts
  • LocationNorthamptonshire, UK
  • Country: Country Flag

Posted 13 March 2014 - 10:13 PM

Fantastic - that css code works perfectly!

 

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



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 March 2014 - 12:14 AM

Ah Excellent! Thanks, glad it worked :-)