[Resolved] Product images don’t show on product page on tablet

[Artem]

Hi,

I just checked out my site on a tablet and found out that the product images don’t show up on the product page:

Here is how it looks like:

https://ibb.co/Gx60HW6

I tried changing the H1 font on tablet but this doesn’t fix the issue.

How can I fix this?

[Leo]

Hi there,

I don’t have an actual tablet to test but used the browser simulation tool (iPad) and couldn’t replicate the issue.

This unlikely a theme issue though – there isn’t anything in GP that can stop the images from showing in tablet mode.

Are you seeing the images all good on desktop and mobile? If so I feel like it’s something to do with the tablet itself.

Do you have another tablet to test by any chance?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Artem]

Hey Leo,

thanks for your feedback. I just checked it out with the browser simulation tool (iPad). And it looks the same as on the tablet:

https://ibb.co/7Nh6h5X

You don’t have this error? This is strange. on mobile and desktop the images are displayed perfectly fine.

Maybe we should just make the font smaller on tablet for product pages?

[Leo]

I see the issue now and it’s a tricky one – The HTML has hide-on-mobile which removes the stack image effect for mobile.

The trouble is, it conflicts with the portrait mode on iPad.

Can you try changing the @media (min-width: 768px) to @media (min-width: 769px) in this CSS?

@media (min-width: 768px) {
	.woocommerce-product-gallery {
		display: none;
	}

	.woo-summary-wrap {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto;
		margin-bottom: 80px;
	}

	.woo-gallery-stack {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.woo-gallery-stack img {
		margin-bottom: 20px;
	}

	.woocommerce-tabs {
		grid-column: 1;
	}

	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Artem]

Hey Leo,

thanks for the CSS but unfortunately it doesn’t work. I inserted the code you’ve posted above with @media (min-width: 769px). Also tried @media (min-width: 770px)

[Leo]

I inserted the code you’ve posted above

That code should already be the Additional CSS field in the customizer.

All you have to do is to modify the @media (min-width: 769px) { line and not add it again.

Can you make sure that’s done correctly first?

Sorry I should’ve clarified.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Artem]

Thank you Leo it is fixed now!!! By the way is there also a way to change the view on desktop devices once the screen gets smaller? The text and content starts too look squashed -> is there a way to fix this?

https://ibb.co/gPKQNpV

If I reduce the font size then the font (H1) it will appear very small on bigger desktop screens.

[David]

Hi there,

in the same CSS Leo pointed out above you will see this:

.woocommerce div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    margin-left: 80px; /* reduce this */
    position: -webkit-sticky;
    position: sticky;
    top: 105px;
    bottom: 100px;
    padding-right: 80px; /* reduce this */
}

I have commented the two properties ( margin-left and padding-right ) that you can reduce to give the summary more space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Artem]

Thank you David. Got it all solved! You guys are amazing. Btw one last thing and then I’ll stop:

I noticed the main menu does not show up on tablet (IPad) only the category selection shows up. Is this a bug or do I have to check my settings? It works on mobile and on desktop though.

[Leo]

Any chance you can open a new topic for the separate question?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts