Jump to content

Trouble changing content width in WordPress


littlevictorian
 Share

Recommended Posts

I am brand new to WordPress and I'm trying to customize my Prose (Genesis) theme. Specifically, right now I'm having trouble with the widths of the content and sidebar. When I test out widths in inspect element, it looks perfect. So, I add the code to the Custom CSS box under the Genesis settings and it doesn't change. When I go back to inspect element, it doesn't show the dimensions I changed it to, it shows "Width: 100%" Does anyone know what I'm doing wrong? How do I change the widths if it's not by adding CSS?

Link to comment
Share on other sites

There are several elements (too many to name) that require changes if you are trying make something fit in an area that is too small width wise. The overall width of your framework is 775px. You have to calculate your content area, sidebar, header, widget(s), etc to make sure it all fits. Otherwise, it just blows up.

Edited by newseed
Link to comment
Share on other sites

Sorry, should have added more details. I am actually trying to make it smaller than it was originally. I resized the content area to 600px, and the sidebar to 130. I changed the header and footer area to 775 as well. The two widgets in the sidebar are set to 125px. Obviously there are other elements over-riding it and I just have no idea how to figure out what those are. Is it too soon to hate WordPress? :)

Link to comment
Share on other sites

You still have one css rule that need adjust for the overall width of the page: #inner { clear: both; margin: 20px auto; width: 900px; /*this is what you have now...adjust to suit your new width*/} Take or zero out the right and top margins as shown below: span.socialwiggle { margin-right: 0; margin-top: 0;} Adjust the width for the header widget area to be... #header .widget-area { width: 280px;} If you want to move the social icons up then the top padding here: #header .widget-area { float: right; padding: 40px 0 0; width: 480px;} I do not know if any of these setting can be set in your theme's setting but you might check the themes folder to apply these changes.

Edited by newseed
  • Like 1
Link to comment
Share on other sites

I have another question. I'm fully aware that it's going to sound stupid, but if I don't figure this out, I'm going to be asking you guys for help every day. And I know you don't want that. :) In WP, how do you find out which elements are overriding the CSS changes you try to make? I'm used to using Inspect Element to find the selector, changing it in the style sheet and I'm done. But with this WP site, there seems to be something overriding almost every time I try to make a change...and I can't find the rule that's in the way. When I test the changes in Inspect Element, it looks perfect, but when I try to make them, nothing happens. For example, when I was struggling with the above issue, I never saw #inner in Inspect Element. (Yes, #inner is a pretty obvious one to miss, because I should have know it was there, but still, it didn't show up.) What am I missing here?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...