Sidebar and Menu on the Right

[Rob]

Hey Bill . . . back at it. Could you give me a hint as to how to fix the sidebar location when minimizing screen sizes? I put this in the custom css

#content {
position: absolute;
width: 620px;
margin-right: 0px;
padding: 0px 30px 30px;
float: right;
background-color: rgba(0, 0, 0, 0.84);
}
#sidebar {
float: right;
position: relative;
width: 200px;
}

I messed with the smaller screen size css but must be overlooking something. Thanks for all your wonderful help.

-rob alex

[Bill Robbins]

Rob,

Sorry for the posting trouble. The first post in a topic is only visible to me at the moment due to a conflict between our forum plugin and our membership plugin.

Good question too. The way to affect only smaller screens is by using media queries. They are CSS statements that allow you to only apply styles when certain conditions are met. Say you want to target only devices smaller than an iPad. You could start that off with this:

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

then place all your styles here. Then close that out with this:

}

If you wanted to target only tablets that are basically in the landscape size range you would use this:

@media only screen and (min-width: 768px) and (max-width: 1023px) {

So only when those conditions are met, the browser width is between 768 pixels and 1023 pixels wide, will the styles inside the media queries be applied.

To target only small devices for your sidebar styles, you could use:

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

to open it up. Then place your styles and follow it up with:

}

I hope that helps point you in the right direction. If you run into trouble, let me know.

Your site’s looking good by the way,
Bill

[Rob]

Hey Bill . . . I do understand about the @media only bits however I can’t find the code to stop the widgets and menu from covering the content when minimized like it does already on the left. I changed over to right

#content {
position: absolute;
width: 620px;
margin-right: 0px;
padding: 0px 30px 30px;
float: right;
background-color: rgba(0, 0, 0, 0.84);
}
#sidebar {
float: right;
position: relative;
width: 200px;
}

Is it in the php files? I am still learning. I know just enough to get in trouble. I love your themes because they are so basic and easily customizable.

[Bill Robbins]

Rob,

When you set the #content div to be absolutely positioned, that means that it will stay in that spot regardless of how the other elements in the page are arranged around it. So the sidebar will lay on top of the content area since it’s using relative positioning and the other is absolute.

There’s a quick entry at CSS-Tricks (http://css-tricks.com/almanac/properties/p/position/) that can show how the various position properties work.

What you could do is make a media query for larger screens only and set the position of the #content div there only. This is how that would look:

@media only screen and (min-width: 1024px) {

     #content {
          position: absolute;
     }

}

You could then remove the position attribute from the style you pasted in above where it affects all screen sizes. You’ll also want to add a left or right value and a top one so that the browser knows specifically where #content is being placed.

Hope that helps out,
Bill

[Author]

Posts