Changing column width on mobile

Think I got and seems to work (was missing a bracket here and there) plus had to figure out all the breakpoints.

@media only screen and (min-width: 79em) {
body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
float: left;
width: 33%;
}
}
@media only screen and (min-width: 79em)
{
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments {
float: right;
width: 67%;
}
}

Thoughts? long term solution or sloppy meatball surgery on my part? Thanks ??

and nope did not work :/
also when I activated the new theme on my site the background image only shows up on front page. hmmm
Any thoughts or suggestions would be great appreciated. Thanks.

Yeah tried all that but no go. it works but undermined my mobile site.

I figured out it was my min-width setting media ( only screen and (min-width: 79em) was too large). Thanks for your input. Greatly appreciated.