Return to previous page

Product page is not responsive for mobile screens.

This topic has 2 replies, 2 voices, and was last updated 1 years, 1 months ago ago by Tony Rodriguez

Arbadev

Participant

September 29, 2023 at 11:35

Hello there,

I am trying to adjust the product page responsiveness for mobile screens. I can’t seem to adjust the addtocart button, it’s aligned to the left and looks weird. Please help me out here. Refer to this product link in mobile screen.
https://skinroute.com/shop/all/isle-of-skin-curry-leaf-powder/

Thank you.

#368882 Copied Theme version: 9.1.12

1 Answer
Tony Rodriguez

Support staff

September 29, 2023 at 12:28
Hello, @Arbadev,

We hope this message finds you well. In order to address the issue you are currently facing, we kindly request you to follow the steps outlined below:

1. Copy the CSS code provided below.
2. Navigate to XStore > Theme Options > Theme Custom CSS > Global CSS on your platform.
3. Paste the copied CSS code in the designated area.
4. Click on ‘Publish’ to save the changes.
```
@media only screen and (max-width: 768px){
.single-product .single-product-builder .et_product-block form.cart {
flex-direction: row !important;
}
}

 @media only screen and (max-width: 768px){
.single-product .single-product-builder .et_element.et_connect-block.flex.flex-row.connect-block-element-k3a3H.align-items-center.justify-content-start {
    margin: 0 0 !important;
    padding-left: 0px !important;
}
}
 @media only screen and (max-width: 768px){
.single-product-builder .et_product-block form.cart .quantity-wrapper:before {
    display: none !important;

}
}
```
We trust that this will effectively resolve the issue at hand.

Best Regards,
8Theme’s Team.
#368887 Copied
Tagged: mobile screen adaptation, product page issues, responsive mobile design, responsive wordpress themes, woocommerce product page, woocommerce themes, wordpress themes
Viewing 2 results - 1 through 2 (of 2 total)