Narrow FAQ's page - Horizon 3.0.0 theme

Store Design
, , , ,

Topic summary

A user sought to match the FAQ page width to their policy pages on a Shopify Horizon 3.0.0 theme. The initial CSS code targeting .shopify-policy__container didn’t work for the FAQ page.

Attempted Solutions:

  • One user offered to provide custom code via private collaboration access
  • Another suggested targeting .custom-section-content with similar width constraints, but this approach failed

Working Solution:
The issue was resolved by targeting main#MainContent[data-template="page"] and its child elements. The successful CSS code:

  • Sets --page-width to 80vw
  • Applies 80% width to .section--page-width, .page-width, and .shopify-section.section-wrapper
  • Removes max-width constraints on .rte-formatter and .accordion elements
  • Centers content with auto margins
  • Only applies on screens 768px and wider

The user confirmed this solution worked for achieving the desired FAQ page width.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to adjust my FAQ’s page to be the same width as my policy pages. However it’s not working.

This is the code used for my policy page:

@media only screen and (min-width: 768px) {
.shopify-policy__container {
max-width: 100% !important; /* Allows the container to expand to the full width of the allowed space /
width: 65% !important; / Adjust this to your desired width, e.g., 75%, 80% */
}
}

Password: Bonnie123

1 Like
2

Hey @lev123,

In order to make the width of the FAQ page same as the Privacy Policy required to do the custom code in your theme file. By any chance can you please share your store collab code in the p/m so that I can take a look into it and do the requested changes.

Waiting to hear back from you.

Thanks

3

You can try this code ,

@media only screen and (min-width: 768px) {

.custom-section-content{

max-width: 100% !important;

width: 65% !important;

margin: 0 auto;

}

}

5

This didn’t work unfortunately.

6

I used this… and it worked!

@media (min-width: 768px) {
main#MainContent[data-template=“page”] {
–page-width: 80vw !important;
}

main#MainContent[data-template=“page”] .section–page-width,
main#MainContent[data-template=“page”] .page-width,
main#MainContent[data-template=“page”] .shopify-section.section-wrapper {
max-width: none !important;
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
}

main#MainContent[data-template=“page”] .rte-formatter {
–max-width-body–normal: 100% !important;
max-width: none !important;
}

main#MainContent[data-template=“page”] .accordion {
max-width: none !important;
width: 100% !important;
}
}