Content and Sidebar width - sidebar smaller and content area wider

Unite Theme
1

I want to make my content area larger and my sidebar smaller. Not great with code. Simplest way possible is best for me. Please help. My url is pastriespumpsandpi.com/

2

Hi @tamekalb,

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

You can make your content area larger and sidebar smaller by adding the following CSS code in the Custom CSS option of Unite theme on the following path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


#primary {
width: 71%;
}
#secondary {
width: 29%;
}

You can change the width of content area and sidebar in the above code by changing the value of width property.

Best Regards,
Movin

3

I have the Unite theme. Do I still follow the same procedure?

4

Hi @tamekalb,

Yes you should follow the same procedure.

Sorry i mistakenly added another theme name instead of Unite in my previous reply which i corrected now.

Cheers,
Movin

5

Hi, I had the same question and used the CSS code.

However, on mobile this causes problems since the columns are stacked under each other then and it uses only 29% of the mobile screen, which is really not great.

How to fix this for mobile? So the sidebar is 29% on full screen and 100% on mobile?

6

Same for content part, it uses only 71% of the mobile screen. I want it 71/29 on full screen and 100% on mobile. Not sure about tablet, any suggestion?

7

Hi @martijn,

Thank you for your question.

You can make the width of it 100% on mobile devices by using the following CSS code along with the previously provided code.

@media screen and (max-width: 768px) {
body #primary {
width: 100%;
}
body  #secondary {
width: 100%;
}
}

Best Regards,
Movin

8

Great, thanks!

9

You are most welcome here :slight_smile:

10

Hi,

Sorry to resurrect an old thread, but this thread had the code I needed to resize the sidebar, but has also changed the content width of the static front page which has no sidebar. Is there anyway to apply the above code to the blog page only?

Many thanks in advance,
Patrick

Theme: Unite

11

@Patrick You can make it to work on blog page only by using following custom CSS code.

body.blog #primary {
width: 71%;
}
body.blog #secondary {
width: 29%;
}

@media screen and (max-width: 768px) {
body.blog #primary {
width: 100%;
}
body.blog  #secondary {
width: 100%;
}
}
12

Perfect! Thank you @Movin, that’s just what I needed. :slight_smile:

13

You are always welcome here :slight_smile: