Product view on phone

This topic has 8 replies, 2 voices, and was last updated 5 years, 11 months ago by pogopie.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
January 7, 2019 at 8:56 am #100291

pogopie
Participant

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.

January 7, 2019 at 10:59 am #100326
pogopie
Participant
fixed it myself
```
.col-lg-9{
padding-right: 0;
padding-left: 0;
}
```
Is this correct ?
January 7, 2019 at 11:30 am #100342
Elise Noromit
Member
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
January 7, 2019 at 12:01 pm #100353

pogopie
Participant

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;}

January 7, 2019 at 12:09 pm #100356

pogopie
Participant

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.

January 7, 2019 at 8:10 pm #100487
Elise Noromit
Member
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
January 7, 2019 at 8:37 pm #100499

pogopie
Participant

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.

January 8, 2019 at 8:39 am #100556
Elise Noromit
Member
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
January 8, 2019 at 10:10 am #100567

pogopie
Participant

Perfect! Thanks a lot
Author

Posts