Make FAQ section more narrow on desktop - horizon theme

[ads18922]

Hello, I would like to make my FAQ section more narrow on desktop:

this is my current store, as you can see its very wide. I would like it to look something like this:

my store is https://geg0hdxyqggohnfo-90984481091.shopifypreview.com , theme is horizon

[tim_tairli]

You can always set left and right padding on the “Accordion” block.

If that’s not enough, try this code in Sections “Custom CSS”:

.section[class*=width] {
  --page-width: calc(70rem + (var(--page-margin) * 2));
}

Adjust 70rem to your taste…

[rajweb]

Hey @ads18922 ,

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag.

5. <style>
   @media (min-width: 992px) {
     .section-content-wrapper {
       max-width: 700px !important;
       margin: 0 auto !important;
       padding: 0 20px !important;
     }
   }
   </style>
   

This will ensure the FAQ section is narrower and centered on larger screens without affecting mobile views. If you’d like, I can implement this for you or adjust the width further based on your preferences.

Let me know how you’d like to proceed!

Best Regards,

Rajat | Shopify Expert

Rajat Kumar - Shopify Expert & Full-Stack Developer

[vm-web]

@ads18922

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find assets/base.css file

4. Add the following code in the bottom of the file .

5. @media (min-width: 750px) {
   #shopify-section-template--25215922241859__section_9bgGyF .section-content-wrapper.section-content-wrapper {
       width: 50rem !important;
       margin: 0 auto !important;
   }
   }
   

Thanks!

[topnewyork]

Hi @ads18922,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 768px) {
  .faq-section {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

You can adjust 700px to be narrower or wider based on your preference. Try 600px or 750px for fine-tuning.

Thanks!