Tagline overlaps Logo in Wordpress Theme Risen

Chris Stanyon recently solved this header problem (see my site at firstumcsb.michianait.net) but then I upgraded the Theme to the 2.0 version and am having trouble with the tagline overlapping the logo again (see my new site at michianait.net/firstumc).

I have used Firebug to see if I could find a difference in the two sites but nothing pops out at me.

I would appreciate any help in solving this problem.

Thanks
Mark
karnac2020Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Sure, you just need to specify something else for left in risen-child/styles.css. Try this (in bold):

#top-right {
    height: 100%;
    left: 40%;
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
}
0
 
Tom BeckCommented:
The difference between the two sites is on line 1268 of risen/styles.css. On the newer site you have left: 0 in the css for #top-right in that file. It should not be there. Not sure why you have it defined on line 1268 of risen/styles.css at all as #top-right is already defined correctly at line 25 of risen-child/styles.css.
0
 
karnac2020Author Commented:
Tommyboy,

Thanks for your post. I didn't put it there - I purchased the theme then made a child theme. Can I make the change in the child theme instead if the parent theme, Risen?

Thanks again,
Mark
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Jason C. LevineConnect With a Mentor No oneCommented:
The logo is placed in div top-right but the tagline is in top-right-inner which is contained in top-right.

So if top-right is set to be 60% of the width of the header and top-right-inner is set to be 50% of top-right, you will have overlap between the logo and the text because there just isn't enough room to render.

The solution is simply to increase the width of top-right to 70%. This gives top-right-inner enough room to work.

#top-right {
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 70%;
}

Open in new window


This code starts at line 25 of the child theme's style.css file.
0
 
Tom BeckCommented:
No, changing the width of #top-right from 60% to 70% just moves the text 10% more to the right. It doesn't move it all the way to the right because you haven't dealt with the left:0 in the parent theme stylesheet. If you want to fiddle with the width of #top-right, make it 100% of the header width. That will put the text all the way to the right. The problem is however, when you decrease the width of the browser window, the text will again overlap the logo at some point. The best solution is to override the left:0 by adding left:40%. When the browser window is decreased, the text will then wrap to a second line at some point rather than overlap the logo.
0
 
karnac2020Author Commented:
Tommy,
I'm not sure where your last comment came from as I didn't post anything since your previous comment.

I did edit the child theme's style.css by adding

#top-right {
    left: 30%;
    max-width:70%;
}

I never know when to use width: verus max-width. I have  heard that max-width is better for responsiveness, but I don't know why.

Your solution worked. My site is at michianait.net/firstumc.

Thanks!

Mark
0
 
Tom BeckCommented:
I was responding to @jason1178 suggestion to change the width of #top-right to 70%.

left:30% and width:70% is a good solution. Using max-width instead of just width is unnecessary because there will always be enough room for the maximum width in the parent container. When using percentages for width and height it's always a percentage of the parent container. In fact, using max-width:70% in your case doesn't work because width:60% still exists in the parent stylesheet and will take precedent when the browser window is wide enough.

Use width when you want an element to be a fixed width regardless of the browser window's width. Use max-width when you want an element to resize automatically with changes in browser width but you don't want the element to exceed a certain width under any circumstances. If you want an element to resize with the browser but you don't want it to get smaller than a certain width, use min-width. You can of course specify both min-width and max-width on the same element.
0
 
karnac2020Author Commented:
Thanks for your help Tommy and Jason.

Works well now.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.