Mobile version is not full width

I tried all the settings and demos and still couldn’t find how to make my page display at full width on the mobile phone.
As the picture, my page is not full-width display on the mobile phone.
please tell me how to fix this.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

.single-product .site-content {
    margin-bottom: 0;
	padding:0;
}
body .single-product-page .container{
padding:0;
}

Best Regards

Thank you for your answer, I added this code. But some new issue has arisen.
Please see pic 6666. There is still a gap on the right side of the image display section, and the image is not centered.
and pic 7777. The contents of the “Description” “Additional information” “Reviews” “Shipping & Delivery” section cannot be fully displayed.
Please help me!

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single-product-content:not(.product-quick-view) .woocommerce-product-gallery__wrapper {
    padding-right: 0; 
}
body .woocommerce-Tabs-panel {
padding:0 20px;
}

Best Regards

I have a friend who recommended the Basel theme to me and his product page is great. He also uses the Basel theme.
Attachment 555555.png is a screenshot of his product page.
Attachment 666666.png is mine.
My friend’s website is bsonly.com
I want to make the picture display part of my product page like him. Especially the thumbnail part and the arrow that slides left and right. What should I do?

Attachments:

You must be logged in to view attached files.

Hello,

The site you refer to is not on Basel theme. The HTML structure does not allow to place the arrows on the sides with CSS.

Please replace the provided above code with this one:

.single-product-page .woocommerce-product-gallery .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
}
.woocommerce-product-gallery .col-sm-12:last-child {
    margin-right: -2px;
    margin-left: -2px;
}
body .single-product-content:not(.product-quick-view) .woocommerce-product-gallery__wrapper {
    padding-right: 0;
}
body .single-product-content .product-images .thumbs-position-bottom .thumbnails:not(.slick-vertical) {
    margin-left: 0;
}

Best Regards

Thank you very much. the issue has been fixed

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts