Quick Add Dawn Theme Center The Buttons

Solved
lichev
Visitor
3 0 1

Hi there,

 

I saw an answer on how to make the Quick Add buttons smaller in a discussion but it's not mentioned how to centre it after we made it smaller.  I've used this code:

.quick-add {
max-width: 90%;
margin: 0 auto;
}

Is it possible to be more centred? Many thanks for considering my request.

 

Screenshot 2022-12-04 at 23.05.00.png 

Accepted Solution (1)
Minakshi15
Shopify Partner
148 6 12

This is an accepted solution.

Hi @lichev 

please add this code in your CSS file 

.quick-add {
max-width: 100%!important;;
width: 70%!important;
place-self: center!important;;
justify-content: center!important;;
}

 

If you find my reply helpful, please hit Like and Mark as Solution

View solution in original post

Replies 3 (3)
Minakshi15
Shopify Partner
148 6 12

@lichev Plese give your site url!!

If you find my reply helpful, please hit Like and Mark as Solution
Minakshi15
Shopify Partner
148 6 12

This is an accepted solution.

Hi @lichev 

please add this code in your CSS file 

.quick-add {
max-width: 100%!important;;
width: 70%!important;
place-self: center!important;;
justify-content: center!important;;
}

 

If you find my reply helpful, please hit Like and Mark as Solution
iCarni
Visitor
1 0 0

I've used the code, but the box Is still to the right.

 

What's wrong with the code

 

.quick-add {
position: absolute;
margin-bottom: 0;
bottom: 73px;
width: 100%;
display: none;
}
.grid__item:hover .quick-add {
display: block;
}
@media screen and (min-width: 750px) {
.quick-add {
bottom: 82px;
}
}
.quick-add {
max-width: 100%!important;;
width: 30%!important;
place-self: center!important;;
justify-content: center!important;;
}