how to reduce/remove sidebar with and so that content area bigger or vice versa

Hi, I am sorry I can’t find a page with sidebar on. Could post a page with sidebar on?

Hi Ashiquzzaman,

Thank you. Sorry i’m quite new to wp and themes.. I can’t find how to make the sidebar appear.. the theme customizer is as basic as it is.. https://www.vividsculptureart.com/wp-content/uploads/2015/09/screenshot-www.vividsculptureart.com_.jpg
The widget in the customizer basically create a menu toggle.. I guess that is the sidebar?
Actually I just wish to increase the content area as wide as possible..

Hi there, Resonar is a single-column theme and doesn’t have a left or right sidebar.

Could you please let me know if you’re you trying to widen the content column on pages like this one, or somewhere else? If somewhere else, please provide a link to the page or post whose layout you’re trying to change. Thanks.

https://www.vividsculptureart.com/about-us/

Hi Kathryn, Yes, I’m trying to widen the content column for all pages, not only about-us page but all pages. Thanks.. ??

Sure, you could try something like this to override the default margins on .entry-content on static pages, on wider desktop screens:

@media screen and (min-width: 76em) {
    .page .entry-content {
      margin-left: 10%;
      margin-right: 10%;
  }
}

Just keep in mind that the more characters per line you add the harder the text becomes to read. ??

https://baymard.com/blog/line-length-readability

@ahnge2000
Try adding this code to your style.css file or custom css section(if your theme have any). Make sure to backup your file before doing any changes or add changes to your child theme.

div.entry-content {
margin: 0px;
width: 100%;
}

Thank you Kathryn..
Thank you ashiquzzaman..
You guys solve my problem
Awesome community here..
??

by the way, there is one changes I want to make but can’t find the solution myself. Each page as you see contain a featured image where my page title sits on top of it. I found the css code here that control the image. I wish to reduce the height 30% as it is currently taking over a lot of screen space.
.entry-header-background {
background-color: #232323;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
border-bottom: 3px solid rgb(179, 131, 50);
min-width: 100%;
overflow: hidden;
position: relative;
}

Try this –

div.entry-header-background {
height: 100px; /*adjust the height */
}

@ ashiquzzaman, it doesn’t work.. i try to put it in any @media screen and (min-width: 37em) or outside of @media but doesn’t seem to do the job..

Your header background image currently has height of 275px. You need to reduce the height. It should work, I checked again working at my end. Did you paste this code in you appropriate css file?

I put inside my childtheme css. Shall I paste the code into all the @media screen or not? can i write “height: 40%” so it is responsive to more screen?

@ahnge2000 this is a theme from WordPress.COM you should open support thread there, This forum provides .org platform.

ashiquzzaman – ahnge2000’s site is self-hosted and this is the right place to get help with the self-hosted version of Resonar. WordPress.com makes its free themes available for use on self-hosted sites, and this is the right place for support with them. ??

Because the .entry-header-background element has an inline CSS height* on it, I think you’re going to need to add !important in order to override it.

This worked for me:

.entry-header-background {
 height: 100px !important;
}

If you want, you can put that into one of your media queries so it only applies to screens of a certain minimum width.

I don’t think a percentage value will work in this situation.

Let me know how it goes.

* See height: 702px here:
<div class="entry-header-background" style="background-image: url("https://www.vividsculptureart.com/wp-content/uploads/2015/09/dinopark.jpg"); height: 702px; margin-left: -250px; margin-right: -250px;">