Hi!
In mobile view, the text is in correct place. But in desktop view, the text is not in line. Photo attached to show what I mean. I wish the text had same padding as “add to cart” and the text below add to cart.. in desktop view.
Thank you!
Topic summary
A store owner seeks to align the product title text with the “Add to Cart” button and description text on desktop product pages. Mobile view displays correctly, but desktop has misaligned padding.
Initial Solutions Attempted:
- CSS code targeting
[data-block-type="title"]with media queries for desktop (min-width: 1024px) - Adding
!importantflags to force padding changes - Neither approach resolved the alignment issue
Root Cause Identified:
A community member diagnosed the problem: overly broad CSS rules in the “Custom CSS” section applying padding-right: 1px and padding-left: 1px to all div elements. This affects far more elements than intended and creates inconsistent spacing across products due to varying levels of nested divs in product descriptions.
Recommended Fix:
- Remove the broad
divpadding rules from Custom CSS - Optionally remove specific styling from
layouts/theme.liquid(above</body>) to align the cart button with the left edge
The discussion remains open pending implementation of the suggested solution.
whats your store url ?
In mobile view its all good, its only in desktop view we need help with
go to your online store → edit code → theme.css file and paste this code in the end of file
@media (min-width: 1024px) {
[data-block-type="title"],
[data-group-type="text-with-rating"] {
padding-left: 12px;
padding-right: 12px;
}
}
Is this only for desktop view as requested? It did not work.
try this
@media (min-width: 1024px) {
[data-block-type="title"],
[data-group-type="text-with-rating"] {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
I tried a few times, did not work for us..
This is what I do not like on your page:
You have this rule in your “Custom CSS” setting of this section:
div {
padding-right: 1px;
padding-left: 1px;
}
This is very broad rule and applies to much more elements then you’ve intended – I’ve added outline so you can see which ones are affected:
I’ve used outline because it does not affect size itself.
Those broad blue stripes are not thick borders – they are accumulated due to nested divs, and here is your second problem – there is too much nesting in your product description (probably too much copy/pastes), and it’s different nesting depth for different products, which means the thickness of these “bands” (white space in real life) will be different for different products.
Some other products have it even worse – twice as thick.
div {
padding-right: 2px;
padding-left: 2px;
}
I’d remove these rules mentioned above and it will align description with heading:
Now, if you’d like to align your cart button to the left edge, you can remove this rule added to the layouts/theme.liquid above the :
