Code Help! "Scrolling quick add box" needs to be centered on page!

Technical Q&A
1

i have been up all night trying to figure this out. …The quick add - box needs to be centered to the page.. this is for desktop view. not mobile. Here is a picture, Right now it is still on the bottom right. i need it bottom center!!! I believe the code edit answere is somewhere in the product.liquid section. Im unsure!!! bleh Its the “dog training” box-bottom right in the picture. Does anyone know how to fix this?

25FB24BF-C0EE-471F-8966-5F9690465A86.jpeg
25FB24BF-C0EE-471F-8966-5F9690465A86.jpeg2560×1600 286 KB

2

@NashMashPets Please add the below line of CSS code at the end of your theme.css file.

body .shopify-section--main-product .product-quick-add{
    left:0;
    margin:0 auto;
}

@media(min-width:700px){
body .shopify-section--main-product .product-quick-add{
    left:1rem;
}
}
3

edit code —> theme.css ------> scroll down to bottom-----pasted CSS Code------> refreshed website page multiple times with clickouts-------> nothing happend. Box is still bottom right.

4

@NashMashPets it looks like not loading in the current CSS.

Do one thing remove from the theme.css file and add the below CSS just before the ending of tag in theme.liquid file.
5

YOU THA MAN!!!

1 Like
6

Is it possible to get the full scroll quick add box on mobile at the bottom of the mobile screen also??