A user seeks CSS code to add padding to the right side of their product page details (text and buttons) on mobile view, while keeping the left side (product image) flush with the screen edge.
Two solutions were provided:
JavaScript approach: Add custom code to the theme.liquid file, placed above the </body> tag. This solution includes styling for the product arrows and “add to cart” button.
CSS approach: Modify the theme.css or base.css file by adding padding rules to the .product-single__info-wrapper class (padding: 0 3rem 3rem 0 !important;).
The original poster confirmed one solution worked successfully. The discussion appears resolved, with the user receiving working code to achieve the desired mobile layout adjustment.
Summarized with AI on November 4.
AI used: claude-sonnet-4-5-20250929.
I want to add to add padding on the right side of the pading overview for the screen to not look like it’s cut or stick to the end of the screen. BUT only on the right side, the left side might stay stuck because it’s the photo.
For mobile view :
Is there any code to add padding on the text and buttons of the product overview please ? Again no padding for the pic but just for the detail behind such as the product title or the “add to cart button” (between the red square). and for the product arrows.
I will be grateful a lot, for your help it’s the only thing that bother me while i took a real pleasure creating my website.
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
