Solved

Tagline overlaps Logo in Wordpress Theme Risen

Posted on 2013-12-05
8
428 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to make a moving character 3 58
Converting dates in JavaScript 2 35
how i fix Remove render-blocking JavaScript 3 57
Add shadow behind div 5 14
This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

803 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