A Shopify store owner needs help centering UI elements in mobile view on product pages.
Initial Issue:
Solution Provided:
A CSS media query targeting screens under 768px width, adding display: inline-flex to the pickup-availability-preview element via the theme’s base.css file.
Follow-up Request:
After the initial fix worked, the user identified a similar centering issue with color swatches and product variant selectors on mobile.
Updated Solution:
Expanded CSS code now includes styling for both the pickup button and the product variant fieldset (display: block for swatch inputs).
Status: Resolved with working code provided for both centering issues.
Hello,
For my product page, for some reason the “pickup at location” part is not centering in mobile view. Does anyone know the code that I can center this button on all products? Thank you.
Ella.
P.s Only message me through here please.
URL: https://www.habooequestrian.com.au/products/waterproof-socks
Hello @ellacoker ,
Follow these steps:
Go to Online Store → Theme → Edit code
Open your Assets > base.css file and paste the following code at the bottom:
@media screen and (max-width: 768px) {
pickup-availability-preview.pickup-availability-preview {
display: inline-flex;
}
}
Regards
Naveen
thank you so much - this is perfect. the only other thing i’m having trouble with is the colour swatches and selector. Do you know the selector for this?
URL: https://www.habooequestrian.com.au/products/s1-compression-breeches
Replace previous css with this one
@media screen and (max-width: 768px) {
pickup-availability-preview.pickup-availability-preview {
display: inline-flex;
}
fieldset.js.product-form__input.product-form__input--swatch {
display: block;
}
}
Regards
Naveen