woocommerce single product mobile layout

  • hlski

    (@hlski)


    7 years ago

    hi!

    I have a problem with the single product layout on mobile devices, as per this page : https://satoristudio.net/bento/shop/retro-boombox/
    on smartphone it shows fine, however on iPad the whole product description below the gallery is aligned to the right, leaving left column empty.
    would you be able to help ?

    thanks !
    kuba

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hello Kuba,

    thank you for choosing Bento! Could you please provide a screenshot of how it looks on your device? Thanks!

    Thread Starter hlski

    (@hlski)

    Hi,

    Thanks for your theme ??
    here you can find the problematic single product page displayed:
    https://drive.google.com/file/d/1JepRfYExfI7fUw9UeWngCx66U5c621ia/view?usp=sharing

    thanks,
    Kuba

    Theme Author satoristudio

    (@satoristudio)

    Thank you, Kuba, now I see! As opposed to Bento, which uses mobile-first approach in defining responsive styles (i.e. starting from the smallest screens and adding elements as they are needed), WooCommerce takes top-down approach by first defining the largest screens. This led to the situation where there is a single point (exactly 768px wide) at which there is a gap between the WooCommerce styling and the theme’s.

    In order to correct this, please add the following code to the “Additional CSS” tab of the “Appearance – Customizer” admin setion; we will also include it in the next version update of Bento:

    @media screen and (width: 48em) {
	
	.woocommerce #content div.product div.images, 
	.woocommerce #content div.product div.summary, 
	.woocommerce div.product div.images, 
	.woocommerce div.product div.summary, 
	.woocommerce-page #content div.product div.images, 
	.woocommerce-page #content div.product div.summary, 
	.woocommerce-page div.product div.images, 
	.woocommerce-page div.product div.summary {
		width: 48%;
		float: left;
	}
	
}
    Thread Starter hlski

    (@hlski)

    That helped, thanks for a quick resolution !
    Kuba

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘woocommerce single product mobile layout’ is closed to new replies.