Customizing Padding Only On Desktop

Topic summary

Goal: add padding to a specific area on the product page, limited to desktop view. A link, password, and screenshot of the target area were provided.

Proposed solutions:

  • Add CSS in assets/base.css: “.collection { margin-top: 5%; }”. This affects elements with the .collection class sitewide and is not desktop-specific or clearly tied to the product page.
  • Insert a Liquid block in theme.liquid above : “{% if product %}{% endif %}”. This conditional is empty; while it could scope code to product pages if content were placed inside, it does not add any padding as given.

Status: unresolved. No verified fix and the desktop-only requirement remains unaddressed. Key next step would be a product-page-specific selector combined with a desktop-only approach, but no concrete implementation was provided in the thread.

Notes:

  • CSS (Cascading Style Sheets) controls page styling like margins/padding.
  • Liquid is Shopify’s templating language for conditionally loading code on specific page types.
  • Screenshot is central for identifying the exact area to pad.
Summarized with AI on December 16. AI used: gpt-5.

Hello my website is tunetoyz.com password: tunetoyz123

Can someone please help me add padding here I only want it to change on desktop not pc this is located in the product page https://tunetoyz.com/products/carti

1 Like

Hello @TuneToyz

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

.collection {
margin-top: 5%;
}

**Hi @TuneToyz **

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag
{% if product %}
  
{% endif %}

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