Need some CSS help with Responsive child theme
-
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
- The topic ‘Need some CSS help with Responsive child theme’ is closed to new replies.