How can I make the sale price and regular price in the same line when I change screen size to mobile screen or 450px and less ?
Topic summary
A user is experiencing a layout issue where sale and regular prices don’t display on the same line on mobile screens (450px and smaller).
Problem: Price elements break into separate lines at mobile viewport widths.
Solution Provided:
- Reduce font size of price elements using custom CSS
- Implementation steps:
- Navigate to Online Store → Edit Code
- Locate theme.liquid file
- Add custom CSS code just above the closing
</body>tag
Status: Solution offered but not yet confirmed as implemented or tested. The responder provided CSS code to adjust price font sizing for mobile breakpoints.
Hi @Kareem-bitar ,
This happened because the size of the price is too large to fit in the section. To resolve this, we can reduce the font size of the price. I have written custom CSS to apply this fix on the site. Please follow the steps below to reduce the size.
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka