Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Tagline overlaps Logo in Wordpress Theme Risen

Posted on 2013-12-05
8
Medium Priority
?
446 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1600 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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 400 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

596 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