- This topic has 9 replies, 3 voices, and was last updated 3 years, 2 months ago by Leo.
-
AuthorPosts
-
January 8, 2021 at 9:14 am #1611221Artem
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:
I tried changing the H1 font on tablet but this doesn’t fix the issue.
How can I fix this?
January 8, 2021 at 10:05 am #1611298LeoStaffCustomer SupportHi 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?
January 8, 2021 at 10:18 am #1611330ArtemHey 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:
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?
January 8, 2021 at 10:39 am #1611356LeoStaffCustomer SupportI 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; } }
January 8, 2021 at 11:43 am #1611417ArtemJanuary 8, 2021 at 11:49 am #1611423LeoStaffCustomer SupportI 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.
January 8, 2021 at 12:09 pm #1611438ArtemThank 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?
If I reduce the font size then the font (H1) it will appear very small on bigger desktop screens.
January 8, 2021 at 12:31 pm #1611455DavidStaffCustomer SupportHi 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.
January 8, 2021 at 12:56 pm #1611478ArtemThank 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.
January 8, 2021 at 5:31 pm #1611638LeoStaffCustomer SupportAny chance you can open a new topic for the separate question?
Thanks 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.