sidebar falling below content ipad prose theme

[senordeer]

Hello, I am using the Prose theme, and no matter what I do (decrease width of sidebar, increase/decrease content-sidebar-wrap, etc., the sidebar is still showing up beneath my content on this site: http://zoesfrontporch.com when viewed on ipad, portrait orientation.

I am using the following: `/* iPad Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
{
css will go here
}`

and I see changes when I made them, eg. changing sidebar color, etc., so I know this is the correct code, but would love some advice on getting the sidebar to appear to the right of the content, not below it when viewed in portrait orientation on ipad. Thanks!

http://zoesfrontporch.com

[jodzeee]

Have you also tweaked the size of the content area?

[jodzeee]

Also, find where your sidebar is set to 100%. That may be overriding what you are setting. I'm having a hard time looking at your CSS since it's minified.

[senordeer]

Actually it is not a responsive theme the dimensions are set to fixed width which is fine it's just the portrait orientation on the ipad, this is the basic layout CSS for that area:

/** Do not remove this line. Edit CSS below. */
.sidebar {
width:280px;
background:none;
padding-left:5px;
padding-right:5px;
border-left: 1px solid #009DDC;
}
.sidebar p {
width:240px;
}
.tagcloud {
width:250px;
}

#sidebar.sidebar.widget-area #widget_sp_image-2.widget.widget_sp_image {
margin-bottom:-5px;
margin-top:-40px;
}
#sidebar.sidebar.widget-area #widget_sp_image-3.widget.widget_sp_image {
margin-bottom:0px;
margin-top:-40px;
}
#sidebar.sidebar.widget-area #widget_sp_image-4.widget.widget_sp_image {
margin-bottom:0px;
margin-top:-33px;
}
#sidebar.sidebar.widget-area #widget_sp_image-5.widget.widget_sp_image {
margin-bottom:0px;
margin-top:-33px;
}
#sidebar.sidebar.widget-area #widget_sp_image-6.widget.widget_sp_image {
margin-bottom:0px;
margin-top:-33px;
}

/* Content
------------------------------------------------------------ */

#content {
	float: left;
	padding: 10px 0 20px;
	width:700px;
}

.sidebar-content #content,
.sidebar-sidebar-content #content {
	float: right;
}

.content-sidebar #content,
.sidebar-content #content {
	width: 690px;
}

.full-width-content #content {
	border: none;
	width: 900px;
}

.page-template-landing-php #content {
	margin: 0 auto;
	width: 680px;
}

.post {
	margin: 0 0 40px;
	overflow: hidden;
}

/* Content-Sidebar Wrap
------------------------------------------------------------ */

#content-sidebar-wrap {
	float: left;
	width: 630px;
}

.page-template-landing-php #content-sidebar-wrap {
	margin: 0 auto;
	float: none;
	width: 700px;
}

But I have tried adjusting all areas of this in all different ways for the ipad and the sidebar still falls below the content, even when I decrease the size. It's so weird.

[jodzeee]

So are we not talking about the link you provided, because on that, I'm finding this:

 @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
body,
.content-sidebar-sidebar #content,
.content-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.page-template-landing-php #content,
.page-template-landing-php #content-sidebar-wrap,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer,
#footer .creds,
#footer .gototop,
#footer-widgets,
#header,
#nav,
#sidebar,
#sidebar-alt,
#subnav {
width:100%;
}

Also, are you trying to make it fit in the portrait orientation, or scroll horizontally? In what you just provided, it appears that you've got a 630px sidebar wrap + 700px content which is quite a bit larger than the screen size.

[senordeer]

Thanks so much yes that was the code in the original theme, I actually figured it out and am posting here, thanks again for the time!

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) 
{
.content-sidebar #content,
.sidebar-content #content {
	width: 600px;
}
.post {
width:600px;
}
#sidebar {
width:250px;
}
}

[jodzeee]

Glad you got it sorted out. Please mark this as resolved.

[Author]

Posts