Product view on phone

Hello,
I managed to remove the preview images on the phone. And I want to strech it to the edges of the screen, how do I do that ?

Or can I choose another style for mobile phone ?
currently i am using
Left vertical.

Attachments:

You must be logged in to view attached files.

fixed it myself

.col-lg-9{
padding-right: 0;
padding-left: 0;
}

Is this correct ?

Hello,

If your code does not work properly, add this one to Theme Setting > Custom CSS > Mobile

.single-product-page .woocommerce-product-gallery .thumbnails {
    display: none;
}
.single-product-page .product-images-inner {
    margin-top: -15px;
    margin-left: -17px;
    margin-right: -17px;
}

Best Regards

Cool, thanks a lot for fixing it!
I have also this code for bigger arrows. but I would like the height of the lines to be the same height as the image size. Is it possible ? Because in pixels it would be different depending on the screen size of the phone and therefore the image.
.owl-nav>div:after, .wrap-loading-arrow>div:after {font-size: 40px;line-height:100px;}

And i use this to stretch the add to cart button, but it is not responsive, i want it mainly on mobile phones to be like that. But its not responsive

Add to cart button
.single_add_to_cart_button {width:100%!important;}

And I want the same for the variations. In that matter stretch it to the right side, as in the images.

Attachments:

You must be logged in to view attached files.

Hello,

Add this code for arrows to the Theme Settings > Custom CSS > Mobile

.woocommerce-product-gallery .owl-nav>div {
	top:0;
	margin-top: 0;
	height: 100%;
}

This code for the button and product variations:

.single-product-page .woocommerce-product-gallery .thumbnails {
    display: none;
}
.single-product-page .product-images-inner {
    margin-top: -15px;
    margin-left: -17px;
    margin-right: -17px;
}

Best Regards

Thanks, line height works, but the variation bar is still not stretched.
For the add to cart i used
.single_add_to_cart_button {width:100%!important;}
But I am not sure if it is correct, but the padding seems fine.

Hello,

Please replace the code for button:

.single-product-page .single_add_to_cart_button {
	width:100%;
}

body .variations_form .variations .value select {
	max-width: 100%;
}

Add this code to the Theme Settings > Custom CSS > Mobile

Best Regards

Perfect! Thanks a lot

[Author]

Posts