WordPress.com Forums » Topic: Sidebar very narrow in Oxygen on mobile devices

iamtakashi on "Sidebar very narrow in Oxygen on mobile devices"

iamtakashi — Mon, 17 Dec 2012 12:22:29 +0000

Hi americanyouthsymphony,

I see the following rule in your custom CSS which is causing the issue you are having. I assume you've copied and pasted it from the original theme's CSS but i don't see it's necessary and it prevents media queries for smaller screen devices to work properly.

#secondary {
	float: left;
	margin: 0 0 0 -100%;
	width: 17.021276595745%;
}

Not to worry about posting it here but, going forward, the CSS forum is more suitable for this kind of question. Cheers.

timethief on "Sidebar very narrow in Oxygen on mobile devices"

timethief — Thu, 13 Dec 2012 19:00:36 +0000

I tagged this thread for moving to the Themes Forum where Themes Staff can respond to you. If you subscribe to the thread you will be notified when they respond.

americanyouthsymphony on "Sidebar very narrow in Oxygen on mobile devices"

americanyouthsymphony — Thu, 13 Dec 2012 18:44:30 +0000

That I get. It's fine to have it appear below, but it shouldn't be as narrow as it is. When viewed in portrait mode, the secondary menu items display so narrowly that there's only one character per line.

Any thoughts?

timethief on "Sidebar very narrow in Oxygen on mobile devices"

timethief — Thu, 13 Dec 2012 18:25:17 +0000

Responsive width means the the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles the sidebars appear below the posts in order to provide as much space as possible for reading.

americanyouthsymphony on "Sidebar very narrow in Oxygen on mobile devices"

americanyouthsymphony — Thu, 13 Dec 2012 18:19:37 +0000

So, I'm trying to optimize the mobile experience for my blog, and I noticed that when viewed as full site on my android phone (rather than mobile site) my sidebar displays very strangely (long and narrow, particularly with secondary menu items). This happens whether I set CSS customization to apply to the mobile version or not (it is currently set not to apply to mobile).

I noticed, however, that when I view the oxygen demo on my phone, the sidebar displays at full width. Oxygen is a responsive width theme, so this is how it's supposed to work.

Any advice on how to remedy this? Is this a better question for the CSS forum?

Thanks in advance!