Combine Theme: Change width of certain pages

[Madeleine4]

Hi, I am using the Combine theme on our website but on our FAQ page I want the content to not stretch over the full page width so it's easier to read. I already created a new template for this specific need but I don't manage to not have the content stretch full width. Can anyone help?

[PageFly-Kate]

Hi @Madeleine4 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-toggle.css->paste below code at the bottom of the file:

html[dir=ltr] .toggle--faq .toggle__content {
   width: 50%
}

Hope my answer will help you.

Kate from PageFly Team.

[Madeleine4]

Hi Kate, thanks so much for helping! I've tried using the code but it's still showing up full width.

[PageFly-Kate]

@Madeleine4 

You can try adding the below code at the end of the theme.css . file

.rte p:last-child {
   width: 50% !important;
}

[Madeleine4]

Thanks so much for trying again. Unfortunately that also didn't work.

[PageFly-Kate]

Maybe you added the code in the wrong place, can you show me where you put it. Thank you

[Madeleine4]

And here where I put the first code you shared:

[Madeleine4]

Hi, I placed the second code you shared a the bottom of the theme.css

[PageFly-Kate]

When I look at your page, it seems that the lines of content have been collapsed, no longer taking up the entire width

You may try to refresh and check again

[Madeleine4]

I see it too now! Sorry I didn't communicate well: I also wanted the lines to be shorter (and ideally the content to be centered). Attached a photo of how we had it with our previous theme which I liked. 

[made4Uo · Accepted solution]

Hi @Madeleine4,

To minimize the width of your FAQ page and match it to your breadcrumbs width, you can follow the instructions below. I think it look professional this way. The code below adjust with the screen size as well

1. From your Admin page, go to Online store > Themes > click the 3 dots > Edit code
2. The code editor will open, go to Asset folder, and open the theme.scss file

.container--large.container--vertical-space-small {
    width: 100%;
    max-width: 920px;
}

See the result here:

Mobile view

[Madeleine4]

Hi, thats actually exactly what I want it to look like! Only thing: using that code if also affects the landing page an minimizes the width of the featured collection, which I don't want.

[Madeleine4]

I found a workaround! I used the code you provided @made4Uo but put it as a custom css in the customize section of the theme for each content toggle section, this way it worked and showed up only there. Thank you so much!