• Resolved thesocialmetamorph

    (@thesocialmetamorph)


    Hi there, the content on my site is all pushed too far to the right. The headers line up perfectly where they should be but then there’s this huge gap between them and the content. I’d just like to center all the content on all pages. Also, on the shop page, I have 2 vertical lines showing up next to the content, I’d like to get rid of those lines.

    I’m brand new to CSS, just taught myself a bit yesterday. Could someone please take a look at rougelace.com and tell me what I need to adjust in my CSS to get the result I’m looking for? I’d be forever grateful! Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Which theme are you using?

    Without being able to view your site or look at the theme it is hard to say. Also, know that if you copy/paste content in the editor when in Visual Mode (top right of the editor area), then it will paste any inline styles. If you have extra <p> tags in there, it sill keep them as separate paragraphs.

    So it looks like you’re making changes directly to the theme’s stylesheet. You should be aware that editing the theme files directly is not suggested. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. Instead, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager.

    What’s causing the content to shift to the right is the float:right; property in this rule:

    .postEntry {float:right; width:530px; padding:15px 20px 30px 0;}

    You can add these rules to clear the float, center the content, and remove the double lines to the left of the store page:

    #content {
    	border: 0;
    }
    .page .postEntry,
    #content {
       float: none;
       margin: 0 auto;
    }

    Thread Starter thesocialmetamorph

    (@thesocialmetamorph)

    I’m so sorry, I don’t know how I didn’t see these responses before. CrouchingBruin, I just made the changes you suggested and it worked on all pages except the blog page. There is still a huge amount of space between the post and the tags on left hand side. Any thoughts? And I’m using Custom CSS now that I know better, thank you 🙂

    CrouchingBruin

    (@crouchingbruin)

    Just modify the second rule to look like this:

    .blog .postEntry,
    .page .postEntry,
    #content {
       float: none;
       margin: 0 auto;
    }

    You may also want to adjust the width of the content on the blog page, which is currently 530px. It’s 630px on your non-blog pages, so you may want add a rule like this:

    .blog .postEntry {
       width: 630px;
    }

    Thread Starter thesocialmetamorph

    (@thesocialmetamorph)

    Done and done and she looks great! Thank so much 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Need Help with Content Alignment’ is closed to new replies.