CSS being overridden in WordPress theme

2 Views

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?

Read More

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;
}
Post Views: 2

Related posts

2 comments

  1. 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;
}

  2. 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.

Comments are closed.