Jump to content
Sign in to follow this  
betron1017

Border on Right-Hand Side showing up on Full-Width Content

Recommended Posts

betron1017

I'm having difficulty with a border that keeps showing up on the right-hand side of my website on certain pages. On site-layout, I've selected flexible percentage width and full width content. I want the beige color showing up at the top and bottom in the header and the footer. The background of the content and sidebars, to include pushing to both sides of the browser window, should be white. On some of my pages - the blog posts and "the-list," specifically, a border of beige shows up on the right-hand side. This is particularly noticeable on mobile devices. I'm not sure how to get rid of it. If there's a quick CSS hack I can use, that'd be great. Any help would be greatly appreciated.

Share this post


Link to post
Share on other sites
Rob

Hi, Can you give us a screenshot? I've looked in Firefox and Safari and IE9, and the site looks fine. I don't see any border. Can you take a screenshot and post a link to it here? The one thing I do see however is that your header background image isn't set to the transparency of its background color, so it doesn't blend well into the header background color. Other than that, all the pages look fine.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
betron1017

Here are some screenshots from pages where this border keeps showing up: http://imgur.com/PKLSe http://imgur.com/Bo1FK http://imgur.com/jkWXi For instance, I'm viewing the site with Safari on a 13" Macbook Pro. When these pages load, and scrollbar on the bottom of the page shows up, indicating more "stuff" is available to the right. That "stuff" is the beige border that keeps showing up. On my i-Phone, the border is even more intrusive. The content on "the-list" page actually crosses over onto the border, creating this weird, overlapping effect of white content jutting out in various intervals over a beige border on the right. This happens on several pages on the mobile version: http://imgur.com/3QJ6i http://imgur.com/SLypM http://imgur.com/7CQAs Any idea why it's doing this?

Share this post


Link to post
Share on other sites
Rob

I don't know if this will work, but it's worth a try: Add to Dashboard > PageLines > Site Options > Custom Code in CSS Rules

.page-canvas {
	     width: 100%;
	}

I suspect either a setting is incorrect or, a plugin conflict is causing it.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
betron1017

I tried putting your suggestion into CSS, and it didn't work. I guess it's got to be a plugin conflict - it's only pages that have a sidebar. Hmmmm.

Share this post


Link to post
Share on other sites
Rob

Hmmm. In Dashboard > PageLines > Site Options > Website Setup, look for "Remove Default Sidebars When Empty " and check the box to Hide Sidebars When Empty (no widgets). Let me know if this works.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
betron1017

I just tried it and that didn't work... I really appreciate you trying to help out!

Share this post


Link to post
Share on other sites
James B

Hi there, looking at your site and it looks like you've managed to resolve this issue. Please let us know if you require further assist or not. If you have managed to resolve please hit 'accept' to close this topic :)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×