0

I'm using twentytwelve and a child theme.

I modified the theme so that the links for "Continue reading" and "Leave a reply" (or "N Replies") appear on the same line under each post. I did this by assigning the "Continue reading" element a class (meta-nav") with float: left, and the "Leave a reply" or "X Replies" element a class (reply-count) with float: right.

In Firefox, the results look fine, but in IE 11, Chrome, and Safari the "Continued reading" element floats into the post content (see for yourself at my staging site: http://fosit.staging.wpengine.com/).

The relevant places for the "Continue reading" elements are:

content.php

<div class="entry-content">     
    <?php the_content( __( '<span class="meta-nav">Continue reading</span>',    
        'twentytwelve' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 
        'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->    

AND

style.css

.meta-nav { 
    float: left;   
    margin-top: 10px;  
    color: #21759b;  
}  

I've been reading about various "clearfix" or empty div fixes, but can't get any to work.

Suggestions?

0

UPDATE: Added a second alternative to match the targeting currently defined by your parent theme.

Try adding:

// generic target (first answer)
a.more-link {
    display: block;
}

// more precise target based on parent theme (second answer)
.entry-content .more-link { 
    display: block;
}

Note sure that will get you to 100% across all of your target browsers but it's a good start and I'm happy to assist further if it creates additional display issues for you.

5
  • That fixed it in IE 11! Thank you so progress! But the problem persists in Chrome and Safari. And where is the more-link class even assigned? I searched most of the the sheets in the directory and the only reference I found for it was in the parent style.css .entry-content .more-link { white-space: nowrap; Firebug also didn't help me find it. – Larry Oct 3 '15 at 3:30
  • Correct. That example from your parent stylesheet is targeting roughly the same element. I've updated my answer to cover both generic targeting and more exact targeting that matches your parent theme. Checking Chrome / Safari now. – dswebsme Oct 3 '15 at 3:43
  • I'm getting consistently aligned elements across Chrome, FF and IE since you made that change. I'm on a mac so no IE for me. Are you sure you've cleared your local cache in Chrome and Safari to ensure you're seeing the CSS changes? – dswebsme Oct 3 '15 at 3:50
  • Cache was it. Working across all browsers. Thank you so much. Being new at this, I've spent at least 4 hours on this one problem alone. What threw me off is not finding where the .more-link is even assigned (I still can't find it in any of the .php sheets). This probably explains why I'm having trouble styling it (e.g., this has no effect: a.more-link:hover { color: #0f3647; }. – Larry Oct 3 '15 at 4:04
  • The class ".more-link" is being "injected" by WordPress. It's deeper in the core files than you are probably looking. Since you are trying to override a parent theme you should try targeting it using the second example I provided. When that fails you can always add "!important" to force your styles to override the parent regardless of targeting. Remember to vote up the answer if it helped you out ;) Be well! – dswebsme Oct 3 '15 at 4:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.