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

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

Home Forums Support Product images don’t show on product page on tablet

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1611221
    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?

    #1611298
    Leo
    Staff
    Customer Support

    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?

    #1611330
    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?

    #1611356
    Leo
    Staff
    Customer Support

    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;
    	}
    }
    #1611417
    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)

    #1611423
    Leo
    Staff
    Customer Support

    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.

    #1611438
    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.

    #1611455
    David
    Staff
    Customer Support

    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.

    #1611478
    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.

    #1611638
    Leo
    Staff
    Customer Support

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

    Thanks 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.