Return to previous page

Align middle text on single product page

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

Lucas

Participant

January 14, 2023 at 16:32

Hello,

I use builder single product to make my own design but i can’t find where i can say that the text (product title, price, description etc…) will stay at the center whilde scrolling. For now it’s fixed on top which is not bad but i could like to be fixed middle.

Thanks

#344007 Copied Theme version: 9.0.2 WooCommerce version: 7.2.2

9 Answers
Tony Rodriguez

Support staff

January 14, 2023 at 18:55
Hello, @Lucas,

Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back to your site after removing the browser cache.
```
.single-product .sticky-block.element-TFML4.et_product-block[data-sticky=element-raHwF] {
    margin-top: 5% !important;
}
```
Regards 8Themes Team.
#344015 Copied
Lucas

Participant

January 15, 2023 at 23:47

Thanks for the tips it work ! But it’s strange cause now i have trouble with “Add to card and quantity” button on mobile. It show on 2 line and the “Quantity” is outside the screen on the left. Check image: https://prnt.sc/09MRvpw1fl1R

Is it possible to put a CSS code to align all the block in the middle when on phone and on table ?

Thanks

#344087 Copied
Tony Rodriguez

Support staff

January 16, 2023 at 06:29
Hello, @Lucas,

Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back to your site after removing the browser cache.
```
@media(max-width:767px){
.single-product .connect-block-element-BMuyC{justify-content:center !important;}
.single-product .mob-justify-content-start{justify-content:center !important;}
}
```
https://postimg.cc/1VzXtBqM

Regards 8Themes Team.
#344101 Copied
Lucas

Participant

January 16, 2023 at 10:10

Thanks but it’s not the Add to card only i want in the middle, it all th bloc with Title and price etc…

Also the Quantity problem isn’t solve, why it’s on 2 line ? I need on 1 line please thanks

#344113 Copied

Tony Rodriguez

Support staff

January 17, 2023 at 08:24

Hello, @Lucas,

Could you please provide me the screenshot that what exactly you want? so that I will check and assist you accordingly.

Regards 8Themes Team.

#344175 Copied

Lucas

Participant

January 18, 2023 at 17:12

Ok no problem here is the image: https://prnt.sc/9muWpOBz8X4N

I want the Green part align center. For the moment you gave me just the code for center align the connection block with “quantity, Price and Button” but i want all the green section center align on tablet and phone.

Second, the orange box, i want on the same line quantity and add to card. But there is a problem on phone and tablet, it’s ok on computer though. I don’t understand why cause it was working before. And now there is trouble.

If you need access it’s in the private area,

Thanks

Please contact administrator
for this information.

#344325 Copied

Tony Rodriguez

Support staff

January 18, 2023 at 18:27

Hello, @Lucas,

Thank you for providing a detailed explanation of your issue. I have adjusted the CSS code on your site, and the block is now centered on the mobile version of the site. However, it is not possible to align the “Add to Cart” and “Quantity” side by side in a single row on mobile, as they are in separate divs with another div in between. Please refer to the screenshots provided below:

https://ibb.co/vYcg2wT
https://ibb.co/cCLdnv7

Best Regards,
8Theme’s Team.

#344331 Copied

Lucas

Participant

January 19, 2023 at 23:37

Ok no problem if it’s on 2 line, but is it possible that the quantity is really in center though ? As you can see it little on the left, not nice to see

#344461 Copied
Tony Rodriguez

Support staff

January 20, 2023 at 05:51
Hello, @Lucas,

We kindly request that you copy and paste the following CSS code into XStore >> Theme Settings >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser’s cache and check back to your site. You may adjust the left value in the code as desired, as it is currently set to 35px.
```
@media(max-width: 480px){
.et_element.connect-block-element-BMuyC > form.cart .quantity {
    left: 35px !important;
}
}
```
Best Regards,
8Themes Team.
#344466 Copied
Tagged: align, middle, page, product, single, text, themes, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)