changed content/sidebar width – is this correct for mobile??

[tussle]

Hi
I added this code to the custom css box (plugin) to change the content width and sidebar width on one specific page. I wanted to make the sidebar more narrow and the content area wider.

.sidebar-primary {
	float: right;
	width: 260px;
}

.content {
	float: right;
	width: 920px;
}

I saw the max width is 1200px - so this is lower.

1. Is this the best way to do it? I have seen posts on changing functions php or using the Genesis layout Plugin (not sure that will work anyway as I am using the free child theme).

2. When I start to shrink the page the sidebox goes right underneath as soon as the window starts to become more narrow.
I tried this:

@media only screen and (max-width: 1200px) {

	.sidebar-primary {
	float: right;
	width: 220px;
}

.content {
	float: right;
	width: 820px;
}
	
}

Seems wrong as I can't seem to make both the sidebar and content area shrink side by side. This is why I wonder if the css code is correct.

Thank you!

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[tussle]

Thanks. Very simply the right sidebar (containing enews extended) on a content/sidebar page scrolls under the content are and stays vertical - it doesn't switch to horizontal layout.

Is the css above correct for the non-mobile site?

[nutsandbolts]

Without being able to see the site, our ability to help you troubleshoot will be very limited, as we would need to use developer tools in the browser to see what's happening. Unfortunately it's not possible to tell what's wrong just by seeing the code.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[tussle]

Thanks.
I was most interested on issue 1, if the the simple code is correct. It works but curious if any changes to php should be made or register a new layout is needed - many tutorials advise on other ways so wondering if this is correct. I need it only for 1 page.

[tussle]

Any experts for mobile code able to advise why the primary sidebar is extending underneath the content area vertically rather than horizontally when reducing screen size?

Using the Genesis Sample Theme - - it only happens when changing primary sidebar width/size., etc.

So far I tried:

@media only screen and (max-width: 800px) {

.sidebar-primary,
.title-area {
width: 100%;
}
}

Thanks!

[tussle]

Here's the solution to 1.

.content {
float: right;
width: 840px;
}

.site-header .widget-area {
width: 600px;
}

Thanks to Genesis coder for that one.

[Author]

Posts