This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Adjust Sidebar Width

Resolved 4 replies customizationthemetheme-vantage
Raymond
8 years ago · Last reply by Raymond 8 years ago

Hi, love the theme. I am trying to adjust the sidebar width using the following Custom CSS

#primary {
width: 90%;
}

#secondary {
width: 10%;
}

I am using the default template. It works good on the posts. On the pages, it adjusts the sidebar width, however the main content doesn’t extend accordingly, so there is a large gap between the sidebar and main content, please help.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Alex S Staff 8 years, 9 months ago

    Preface: This post has been updated with the CSS found in my next reply.

    Hi Raymond,

    I would recommend using the following CSS instead:

    @media (min-width: 681px){
	.page-template-default #primary, #primary {
		width: 71.287%;
	}
	#secondary {
		width: 23.762%;
	}
}
.page-template-home-panels #primary, .page-layout-no-sidebar #primary, .page-layout-full-width #primary {
	width:  100% !important;
}

    Do you have a public URL where we can take a look at what’s going on?

  2. Raymond 8 years, 9 months ago

    Hi Alex:

    Thank you for the reply, the new CSS doesn’t work. Here are the URLs:

    This is a post which works fine:
    http://www.tripwinego.com/en/my-wine-buying-list-en/

    This is a page, you can see the gap between main content and sidebar is much wider
    http://www.tripwinego.com/en/my-wine-buying-list-page-en/

  3. Alex S Staff 8 years, 9 months ago

    Hi Raymond,

    Please replace the previously provided CSS with:

    @media (min-width: 681px){
	.page-template-default #primary, #primary {
		width: 71.287%;
	}
	#secondary {
		width: 23.762%;
	}
}
.page-template-home-panels #primary, .page-layout-no-sidebar #primary, .page-layout-full-width #primary {
	width:  100% !important;
}

    How does that look?

  4. Raymond 8 years, 9 months ago

    It works like a charm, thanks a lot for your help.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread