Solved

Tagline overlaps Logo in Wordpress Theme Risen

Posted on 2013-12-05
8
429 Views
Last Modified: 2013-12-06
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
0
Comment
Question by:karnac2020
  • 4
  • 3
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39699969
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
 

Author Comment

by:karnac2020
ID: 39700092
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 400 total points
ID: 39700101
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 100 total points
ID: 39700156
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39700851
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
 

Author Comment

by:karnac2020
ID: 39700910
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39700963
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
 

Author Comment

by:karnac2020
ID: 39701161
Thanks for your help Tommy and Jason.

Works well now.
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question