Help with Wordpress CSS -- please!

Posted on 2011-10-26
Last Modified: 2012-06-21
Hi-- I am using a weird theme in Wordpress, but it's too late to turn back now.

All of my content is lining up too far to the left and I don't really understand CSS. I made some alterations to the theme and now everything is messed up!

You can see the content is lined up wrong on posts or pages, which both use the same layout:   (page) (post)

Thank you so much. I really need the help!


Question by:mellijae
    LVL 70

    Expert Comment

    by:Jason C. Levine
    It's going to be a lot of fidgeting with inline styles but the basic issue is there is no margin or padding on anything so all elements are starting right from the edge.

    So look for this div:

    <div style="width:900px; padding:0; margin:0 auto; display:block; clear:both; overflow:hidden;" class="builder-module-outer-wrapper builder-module-content-outer-wrapper">

    and change the padding so it looks like this:

    <div style="width:900px; padding:0 10px; margin:0 auto; display:block; clear:both; overflow:hidden;" class="builder-module-outer-wrapper builder-module-content-outer-wrapper">

    That 10 pixels of left and right padding will help bring the text into line but now you'll be having to go up and down the CSS tree making a similar change to other instances of that inline style and there are a LOT of those instances.

    Something else to play with are the widths.  Everything is 900 pixels but your background appears to not be quite that wide.  Depending on the effect you are going for you may want to tighten that up.

    As observed in your other question, this is really, really poor design that you are being forced into manipulating...

    LVL 3

    Accepted Solution

    A more straight forward approach would be to modify the CSS and specific style that is already being applied to the contents DIV tag.

    Locate the following file:
    Go to line 403 which should have the following: .builder-module-content .builder-module-element {
    Within this element add padding-left:25px;
    I have attached code which reflects what this block of styling should look like.
    .builder-module-content .builder-module-element {
       margin: 1.5em;
       display: block;
       text-align: left;
       overflow: hidden;
       padding-left: 25px;

    Open in new window

    LVL 9

    Expert Comment

    On the
    the content is in div with class post-content. Try to put the content on the other site in a div from the same class.

    Author Closing Comment

    Thank you so much for taking the time to write such a detailed answer. I really appreciate it and you are helping me in my own learning process. Thank you!

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now