Product Page Width - Prestige Theme

Shopify Discussion

Topic summary

A user encountered an issue where custom CSS code added to make the collection page full-width was also affecting the product page layout, causing the right-side product description to be cut off.

Problem Details:

  • Custom CSS in theme.liquid made collection pages display full-width
  • Same code unintentionally impacted product pages, truncating content
  • User wanted to maintain full-width collections while fixing product page display

Solution Provided:

  • Wrap the custom CSS code within a conditional template check
  • Use {% if template == 'collection' %} and {% endif %} tags
  • This restricts the CSS modifications to collection pages only

Outcome:

  • Solution successfully resolved the issue
  • Product pages now display correctly while collection pages remain full-width
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi! Does anyone know why my product page is displaying full width like this? And how to stop it? I don’t think it looks bad on the left side padding where the images are but as you can see, it’s cutting off the right-hand side product description.

So you are aware, I did add the code below to theme.liquid to make the collection display page full width, which I’d still like to keep but worry this is interfering with the product page code.

.product-card__info {
position: absolute !important;
align-self: self-end !important;
padding-left: 10px !important;
padding-bottom: 5px !important;
color: white !important;
}
.v-stack.justify-items-center.gap-1 {
justify-items: left !important;
}
.color-scheme.color-scheme–scheme-1 .container {
margin: 0 !important;
max-width: 100% !important;
}
sale-price.h4.text-subdued {
color: black !important;
}
sale-price.h6.text-subdued {
color: black !important;
}

Thank you!
Emily

Product Page -

Screenshot 2024-08-11 at 16.55.40.png
Screenshot 2024-08-11 at 16.55.40.png2880×1558 328 KB

Collection Page (happy with this) -

Screenshot 2024-08-11 at 17.10.07.png
Screenshot 2024-08-11 at 17.10.07.png2880×1556 319 KB

1 Like
2

Please add all the code you added in the following code @emilyaugstudios .

{% if template == 'collection' %}

  

{% endif %}
  • Example
{% if template == 'collection' %}
  
{% endif %}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Thank you so much! Worked perfect. Constantly learning about code :blush:

1 Like
4

Glad to help you. Have a good day!

1 Like