How do I make sidebar a little wider?

[AutoHail]

Corporate Child Theme & Genesis
How do I make sidebar a little wider?

My PayPal widget is cut off a tiny bit. The drop down arrow is cut off.

I would rather make the main area a little smaller than expand the entire site.

Thanks!

 

http://autohailgroup.com/world-hail-network-automotive-service-directory/

[Susan]

You would need to adjust a number of the pieces inside your CSS.

This guide should help you determine what you need to adjust:

http://my.studiopress.com/docs/visual-markup-guide/

[AutoHail]

I am not a programmer, I tried changing a bunch of numbers, but none had any affect. I do not want to screw the site up by messing around too much. Thank you though.

 

[Susan]

AutoHail - I'm not a programmer, either, but I've done it on my own site with a little experimentation. Let me look at your site's stylesheet and see if I can come up with some specific lines to change 🙂

 

[Bill Murray]

Susan can address the issue of changing your CSS, but you might want to consider modifying your Paypal widget.  The drop down takes its width from the items you populate it with.  If you dropped the word "Listing" from each of your drop down items, in all likelihood you wouldn't have to change your CSS.  Because of the width of your longest entry, you may find the CSS changes that are necessary to fix your problem make your content area too narrow.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[AutoHail]

Adjusted PayPal button. Genius in simplicity. Thank you both very much!

[Susan]

Glad that helped - definitely easier than adjusting the CSS!

For future reference:

If you find that you can't adjust something within the sidebar, and you want to physically adjust the width of the sidebar, you would look for this in your CSS:
/* Primary / Secondary Sidebars
------------------------------------------------------------ */

.sidebar {
background: #f5f5f5;
display: inline;
float: right;
margin: 0 0 20px;
padding: 15px 15px 5px;
width: 250px;
}

Replace the 250px with the new width.

Then, you would need to look for this:

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

#content {
float: left;
padding: 10px;
width: 450px;
}

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

and adjust the 620px down by the amount your adjusted the 250 up (a sidebar of 300 px would mean a width of 570 px for the center area.

[AutoHail]

Great! Thanks again

[Author]

Posts