CODEWITHSUNDEEP
htmlcsswordpress
excowboy
excowboy

Reputation: 136

CSS being overridden in Wordpress theme

I have a div with 3 columns, each column set to contain a thumbnail image link. I've styled this div - .reading-pane - to have the right margins and borders in order to accommodate my design. There is also an inner div - row_inner_wrapper - that is created by the theme I'm using. There is no width set for this div - it should just accommodate the three thumbnail divs. However, the .row_inner_wrapper div is wider than the total of the image divs and making my .reading-pane div extend off the right of the page.

I can find no styling that should cause this using Firebug. However, in Chrome I can see that there is a right margin applied when I mouse over this div, even though there are no such styling rules applied. I can even set margin:0px !important on this div and the margin remains. Any suggestions on where my phantom CSS may be coming from?

You can see the page in question here http://jpsingh.samcampsall.co.uk/galleries/

HTML

<div class="reading-pane">
    <div class="row_inner_wrapper">
        <div class="row_inner">
            <div class="themify_builder_sub_row clearfix">
                <div class="col3-1">
                </div>
                <div class="col3-1">
                </div>
                <div class="col3-1">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.reading-pane{
background-color:#ffffff;
background-image: url('leftcolumn.png');
background-repeat:repeat-y;
margin:30px;
padding:25px 25px 25px 103px;
}
.row_inner_wrapper{
margin:0px 0px 0px 0px !important;
}

Upvotes: 1

Views: 130

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

Just set the width of the block of code below to auto. 100% stretches it beyond its parent.

 .themify_builder_row.fullwidth, 
.themify_builder .module_row.fullwidth, 
.full_width.sidebar-none .themify_builder .themify_builder_row {
 width: auto;
}

Upvotes: 1

pgk
pgk

Reputation: 1477

in your .reading-pane div you have class

.full_width.sidebar-none .themify_builder .themify_builder_row.

This class have a rule width: 100%;. When I removed this rule the .reading-pane div was positioned properly.

Upvotes: 1

Related Questions