I want the title and price on the product page to be on the same line, title left and price right, just like the landing page
now it is stacked in the middle…
Topic summary
A user wants to reposition the product title and price on their product page to display on the same line (title left, price right), matching their landing page layout. Currently, these elements are stacked vertically in the middle.
Proposed Solution:
Another user provides CSS code to be added to the theme.css file that:
- Floats the title to the left
- Applies negative right margin to the price element
- Targets mobile screens (max-width: 767px)
Status: The solution has been offered but not yet confirmed as implemented or tested. The discussion appears to be awaiting feedback on whether the CSS modification resolves the layout issue.
1 Like
Hello @Disci ,
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your theme.css file and paste the following code at the bottom:
@media screen and (max-width: 767px) {
[data-block-id="title"] {
float: left;
}
[data-block-id="price"] {
margin-right: -10rem;
}
}
Copy
If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Thanks
1 Like