A user is seeking help with CSS customization for their store design. They want to reposition the size variation selector to align with the product price on the right side of the page, rather than its current location. An image was included to illustrate the desired layout change, showing where the size variation should be moved (indicated by an arrow in the reference image).
Hi! I’d like to move the size variation to the position of the arrow, aligned to the right and at the same level as the price. Please see the image for reference. Thanks
url: Giuseppe Zanotti Black Quilted Leather Wedge Sneakers (38 EU) – VOODOO WAREHOUSE
Hello @voodoowww123
1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.card__price-swatch {
flex-direction: row !important;
justify-content: space-between !important;
}
.card__swatch {
justify-content: flex-end !important;
}
}
Thank You!
Hello @voodoowww123
Your filter icon is still appearing above the filter. Add this code, it will fix that as well.
If my code works, please mark it as the solution.
@media (max-width: 768px) {
.cloud-search-page-controls__filters-link {
padding-left: 20px !important;
}
}
Thank You!
