Solved

Tagline overlaps Logo in Wordpress Theme Risen

Posted on 2013-12-05
8
426 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 49
Ajax control editor 4 35
Urgent need help ASAP With CSS 5 21
Phone Dialer 5 36
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now