Hello, can someone please help me with an issue on my Shopify store? Everything looks fine, but on the mobile view of my product page, the content does not appear in full width. I’m using the Flow theme, version 39.7.0. Any help would be greatly appreciated!
Topic summary
A Shopify store owner using the Flow theme (v39.7.0) encountered a mobile product page layout issue where content wasn’t displaying at full width, leaving visible margins.
Solution Provided:
A CSS fix was shared to be added to the theme.liquid file before the closing </body> tag:
- Initial code targeted the product template and adjusted container width
- Code was later refined to remove additional spacing and achieve true full-width display
Key Technical Details:
- Solution uses conditional Liquid templating (
{% if template.name == 'product' %}) - CSS targets
.product__content-wrapperwithwidth: 100%andmax-width: 100% - Additional padding adjustments were made to eliminate brown background visibility
Outcome:
The issue was successfully resolved. The helper clarified that some spacing visible during desktop preview won’t appear on actual mobile devices.
Hi @Primal2 , can you share your store url?
Hello Mr. Abdosamer, here is the URL: https://www.primalkrisp.com/
@Primal2 , Go to theme.liquid file and add the following code to it at the end before tag :
{% if template.name == 'product' %}
{% endif %}
Result:
Can you please make it detailed for me?
Thank you so much 
It works!!!
Thank you so much!!!
1 Like
@Primal2 , You’re very welcome! If you ever need any help, feel free to reach out anytime.
@Primal2 , Sure!
Update the code to the following :
{% if template.name == 'product' %}
{% endif %}
Result :
@Primal2 ,
This space won’t appear on mobile screens; it’s only visible because I’m previewing it on a desktop.