简体   繁体   中英

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

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM