Single product images — loading and full-width

[filipecardigosoliveira]

Hi, I’d like to request your help with the following:

1)
I’m experiencing a loading issue (view image) every time I access a single product. Carousel images appear stacked below the image frame for a couple of seconds.
I’ve compressed the images to the limit (average 200Kb) and it still happens.
It happens on all devices with various browsers. Also with different wi-fi networks, potentially with different bandwidths.

2)
Mobile
I’d like to force the carousel images to show full-width without any padding. I’ve accomplished this on the shop page, but I just can’t do it in the single product page.

3)
Portrait tablet
I’m also trying to set a 100% width image to override the Theme Options > Woocommerce > Product Image Width settings, where the image is set to 65%.

4)
Landscape tablet
The same, but here I’m trying to set up a 50% width image + 50% product summary.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Enable the Page Transition option. Theme Options => Preloader/Transition Options

2) You would need to work with a developer to integrate this. You would want to look to edit the jQuery in functions.js and functions.min.js.

3 & 4) You use these media queries (this is for the device, not for shrinking the browser window): http://stephen.io/mediaqueries/#iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	/* iPad in landscape - STYLES GO HERE */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	/* iPad in portrait - STYLES GO HERE */ 
}

[filipecardigosoliveira]

Hi David, thanks for your reply.
1) Done!
2) Guess I have to!
3) & 4) Can you help me target the slider element? I thought I could but when I style it to be width:50% it assumes 50% of the given 65% in the back office..

[David Martin – Support]

No worries:

3&4) It should be this CSS, within the above media query:

.woocommerce div.product div.images {
    width: 100% !important;
}

[filipecardigosoliveira]

Thats’s great, succeeded!
Thank you David

[Rui Guerreiro – SUPPORT]

No problem. Thanks David.

-Rui