Make collapsible content full width only for mobile view

Store Design

Topic summary

A user seeks to make collapsible content full-width exclusively on mobile devices while maintaining the current desktop layout. Screenshots illustrate the current narrow mobile appearance versus the desired full-width display.

Solutions Provided:

  • niraj_patel: Add CSS media query targeting screens ≤767px to theme.liquid before </body>, setting .collapsible-content__wrapper .collapsible-content-wrapper-narrow to width: 100% !important; max-width: 100% !important;

  • Dan-From-Ryviu: Insert similar CSS code after the <head> tag in theme.liquid

  • Team_OSC: Modify base.css to adjust .collapsible-content-wrapper-narrow with custom padding, margin, and max-width values (85% width, 73.4rem max-width)

Outcome:

The original poster confirmed one solution worked successfully. Minor follow-up discussion suggests potential implementation questions remain unresolved.

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

Hi!

How can I make the collapsible content on my theme full width, but only for the mobile view?

thank you!

How it looks now:

Screenshot 2024-06-19 at 3.43.34 PM.png
Screenshot 2024-06-19 at 3.43.34 PM.png676×788 79.2 KB

How I want it to look:

Screenshot 2024-06-19 at 3.47.23 PM.png
Screenshot 2024-06-19 at 3.47.23 PM.png666×784 202 KB

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

2

Hello @letsgetwasted

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 767px) { .collapsible-content__wrapper .collapsible-content-wrapper-narrow { width: 100% !important; max-width: 100% !important; } }

techlyser_web_0-1718784286549.png
techlyser_web_0-1718784286549.png317×381 7.46 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hi @letsgetwasted

You can do that by adding this code to theme.liquid file, after tag
4

Hi @letsgetwasted

Online Store > themes > More Actions > edit code > base.css

.collapsible-content__wrapper .collapsible-content-wrapper-narrow {
    width: 85% !important;
    max-width: 85% !important;
}
.collapsible-content-wrapper-narrow {
    margin: auto;
    padding-right: 0; 
    padding-left: 0;
    max-width: 73.4rem;
}

Let me know if it’s useful by like and accept my solution.

Best Regards,

Team_OSC

5

This worked really nicely, thank you!

1 Like
6

You are very welcome!

7

@letsgetwasted
I think you have not implemented my code :slightly_smiling_face: