Solved

Combine Theme: Change width of certain pages

Madeleine4
Tourist
24 0 2

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?

Accepted Solution (1)

made4Uo
Shopify Partner
3814 714 1131

This is an 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:

made4Uo_0-1677006601601.png

 

Mobile view

made4Uo_1-1677006623968.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 12 (12)

PageFly-Kate
Shopify Partner
1089 325 320

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%
}

PageFlyKate_0-1677003737037.png

Hope my answer will help you.

Kate from PageFly Team.

 

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Madeleine4
Tourist
24 0 2

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

PageFly-Kate
Shopify Partner
1089 325 320

@Madeleine4 

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

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Madeleine4
Tourist
24 0 2

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

PageFly-Kate
Shopify Partner
1089 325 320

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Madeleine4
Tourist
24 0 2

And here where I put the first code you shared:

Bildschirmfoto 2023-02-21 um 19.58.30.png

Madeleine4
Tourist
24 0 2

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

 

Bildschirmfoto 2023-02-21 um 19.55.19.jpg

PageFly-Kate
Shopify Partner
1089 325 320

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

PageFlyKate_0-1677006036540.png

 

You may try to refresh and check again

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Madeleine4
Tourist
24 0 2

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. Bildschirmfoto 2023-02-21 um 20.04.02.png

made4Uo
Shopify Partner
3814 714 1131

This is an 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:

made4Uo_0-1677006601601.png

 

Mobile view

made4Uo_1-1677006623968.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Madeleine4
Tourist
24 0 2

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.Bildschirmfoto 2023-02-21 um 20.18.21.png

Madeleine4
Tourist
24 0 2

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!