WordPress.com

1. eflodstrom
   Member
   Oct 10, 2012, 2:28 PM

   Theme: Chateau

   I've recently noticed that my blog doesn't look correct when viewed in Google Chrome (the browser I mostly use). My right column is at the bottom of the page in GC. I've checked my theme settings and widget settings and they're all set for everything in that column to be on the right. When my blog is viewed in Firefox, Safari & IE everything is fine. Any idea why this might be happening?

   The blog I need help with is prettysweetlife.com.

2. timethief
   Member
   Oct 10, 2012, 6:10 PM

   Does this help? http://wpbtips.wordpress.com/2012/05/19/sidebar-at-the-bottom-and-related-issues/

3. eflodstrom
   Member
   Oct 12, 2012, 8:05 PM

   I was hoping it would, but I did what the post said and it's still not working. Why would it be doing this in Chrome only?

   Thanks!

4. designsimply
   Happiness Engineer
   Oct 13, 2012, 11:52 AM

   In this case, it looks like a CSS issue. Not all browsers are exactly the same, and it seems Chrome is interpreting something in your CSS differently. It doesn't happen very often with the types of changes I see in this forum, but it does happen. I haven't figured it out yet, but I'll see if I can help pin down the cause.

5. designsimply
   Happiness Engineer
   Oct 13, 2012, 2:31 PM

   I found that your sidebar works normally without your custom CSS (tested using browser tools).

   I also found that if you remove the following CSS from your custom CSS "@media max-width 800px" rule, then the sidebar snaps back into place:

   #main #content {
   		border:none;
   		padding-left:0;
   		width:auto;
   		margin:0;
   	}
   
   	#main #secondary {
   		float:none;
   		width:auto;
   		margin:0 7%;
   		padding:0;
   	}

   I'm not sure why the problem happens in Chrome and not other browsers.

   It was hard to debug your CSS because you copy and pasted the entire original stylesheet. The best way to make updates is to select the "Add my CSS" option on the Appearance → Custom Design → CSS page and then just add in small CSS snippets for changes you want to make that are different from the original stylesheet. Then you can use the original stylesheet as a reference and not copy and paste the entire thing into the CSS editor.

Topic Closed

This topic has been closed to new replies.