Adjust width of full-width template without changing width of posts w/ sidebar

Activello
#1

Hello, I love the clean look and customizability of Activello. I hope you can help me with a couple of issues.

I’m trying to use the full-width posts for some of my tutorial articles. Here are 2 issues I need help with.

  1. Can I adjust the width of the full-width post without affecting the width of the posts with sidebars? In full-width it’s a little too wide making the text very long per line. I hope the full-width size can be adjusted down without changing the width of the posts with sidebars.

  2. I’m trying to split sections of my tutorial using a big div block with background color. Pls. see the chapter headings in SEO in 2021: The Definitive Guide.

Is there a way to do it like in the example, ie. make the background color blocks span the entire width of the screen while keeping the content’s text within a narrower width?

It would be great to able to change the colors of the background “section block” as well. I’m okay with using div style=”” inside the WP html editor to do this.

I tried using width 100% but it only makes a block till the content’s width.

Thanks a lot!

#2

Hi @elgee,

I hope you are well today and thank you for your questions.

Could you please share me the page URLs from your site where it is displaying so that i can help you to achieve it?

Best Regards,
Movin

#3

Here’s the URL: Hello world! | Pet Peeves

I’m using a test page because I still can’t get it right.

Issue #1: the width is too long for me in full-width post. In the post, this is the lorem ipsum part. Can the width be reduced?

Issue #2: I put width: 100% on the the “chapter 1” div block but it only goes up to the content region. I’m hoping the background can stretch the full screen while keeping the text in the content region.

Thanks.

#4
Issue #1: the width is too long for me in full-width post. In the post, this is the lorem ipsum part. Can the width be reduced?

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

@media (min-width: 992px){
.main-content-inner.full-width {
    width: 80%;
    float: none;
    margin: 0 auto;
}
}
Issue #2: I put width: 100% on the the “chapter 1” div block but it only goes up to the content region. I’m hoping the background can stretch the full screen while keeping the text in the content region.

You can use any of the following page builder plugin to achieve it.

#5

Thanks for the help!

#6

You are most welcome here :slight_smile: