Jump to content
Sign in to follow this  
littlevictorian

Trouble changing content width in WordPress

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?

Share this post


Link to post
Share on other sites

I'm also having trouble changing the positioning of widgets. I added one to the header-right area, but when I try to alter the margin to move it to the top of the screen, it just keeps bumping it back down. Oh, my mess of a site is here if that helps.

Share this post


Link to post
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

Share this post


Link to post
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? :)

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...