How to align text in collapsible content

Store Design
, , , , , , , , , , ,

Topic summary

A user seeks to align heading and answer text in a collapsible content section across all screen resolutions on their Shopify product page.

Problem:

  • When the collapsible content opens, the heading and hidden answer don’t align properly on the same line
  • Issue visible in the collapsible content section at the bottom of the product page

Solution Provided:
Two developers offered the same CSS fix:

  • Navigate to: Online Store → Themes → Actions → Edit Code → Assets → collapsible-content.css
  • Add this code at the end of the file:
.collapsible-row-layout .accordion .accordion__content {
    padding: 1.5rem !important;
}

Status: Solution provided with visual confirmation showing the corrected alignment. Awaiting original poster to mark as resolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
2

Hey @CreatorTim this is Qasim a Sr. Shopify developer.

In order to make Collapsible content align with the text the please paste this code in the end of “collapsible-content.css” file.

Here is code

.collapsible-row-layout .accordion .accordion__content {
    padding: 1.5rem !important;
}

If this was helpful please mark as solution and like it.

1 Like