• Latest version of Responsive and WP installed..

    I’ve been trying to get a particular layout using only CSS for the H1 .entry-title .post-title class in my child theme for Responsive

    In order to reproduce the mock-up I am working from, I need a left floated image, 600x137px followed by the right floated page/post H1 title that winds up being vertically & horizontally centered in the remaining 370x137px space.

    Then on top of that, the mock up has a gradient behind the title text… but I’ll worry about that later.

    I’ve gotten some parts of it to work with CSS alone and not hacking theme files. but I can’t get the H1 to hover where it needs to go.

    Hopefully the above makes sense, and even more so, hopefully some kind CSS guru could give me a clue..

    Here’s the underlying HTML generated by Responsive

    <div id="content-full" class="grid col-940">
        <div id="post-8" class="post-8 page type-page status-publish hentry">
            <h1 class="entry-title post-title">
    
    	PAGE POST TITLE
    
            </h1>
            <div class="post-entry">......

    Here’s what I’m attempting to make work…

    /* this part works, header.jpg is 600px wide and is right where it needs to be */
    .post-title , .entry-title {
    padding:0px; height:137px; width:100%; vertical-align:middle; border: 10px solid #606060;
        background-image: url('header.jpg');
        background-position: left center;
        background-repeat: no-repeat;
    }
    
    /*
    this part doesn't seem to work at all.. I even left some of my desperate attempts in like (align-self, and disabling text-rendering)
    */
    
    h1 {
    align-self:center;
    font-size: 22px;
    line-height: 137px;
    vertical-align: middle; /* looks like it is set to top.. can't find why */
    padding-right:32px; /* attempting the appearence of centering.. no joy */
    width: 353px;
    height:137px;
    background-image: url('back_header.jpg'); /* image isn't displayed.. likely covered by the above image */
    background-position: right center;
    background-repeat: no-repeat;
    text-rendering: none;
    
    }

    Again, I’d really appreciate any suggestions.. been battling this challenge for way to long

Viewing 2 replies - 1 through 2 (of 2 total)
  • Do you have a link that you can share? It would be easier if we could examine the site itself.

    Thread Starter Dewed

    (@dewed)

    Thanks for the response. Unfortunately right now the WP site I’m working on is locked up, but, the site and look I’m trying to reproduce with WP and the Responsive theme is https://steppingstonedental.com

    I’ll have to advise some folks before I make the location of my development area publicly accessible.. It’s basically a pro-bono gig, which I was confident I could do, and I can, except for this one little thing :/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need some CSS help with Responsive child theme’ is closed to new replies.