Parallax Home Page widget titles

[rayman]

I've been theme tweaking and now the homepage widget title areas aren't responding correctly at smaller sizes. The widget body text too looks like the spacing is off.

I've backtracked but can't seem to get them working properly again - pointers much appreciated
Thanks

http://mauimusic.com/_new/

[Marcy]

For this widget title at small screen sizes, the second line overlaps the first - Let Maui Music Rock Your World.
Is that what you want changed?

If so, it's because you're using a font-size of 52px, but a line-height of 20px.
Find this:
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}

and change line-height
line-height: 1;

The 1 will make it be 52px. You could use
line-height: .8;
if you want the lines closer, but don't use px size.

You will need to be more specific with any other changes you need help with.

---

Marcy | Amethyst Website Design | Twitter

[rayman]

Hi Marcy

yes the overlapping is what i'm looking to change. And also to increase a bit the line height of the widget text on the homepage.

I have searched the css file but do not find anywhere 'line-height: 20px;' or any line heights in px. The 52px setting is for Titles for which the line height is 1

I've also searched for other lines you suggested like 'font-family: inherit;' & 'text-rendering: optimizelegibility;' & even 'font-weight: bold;' so I'm at a bit of a loss.

Where exactly do you see the line-height: 20px;?

thanks
for your assistance

[Marcy]

It appears to be in the image-mapper plugin you are using. I didn't notice earlier.
http://mauimusic.com/_new/content/plugins/image-mapper/css/bootstrap/css.bootstrap.css
Line 736

If you look in your style.css and find this near line 1165:

.home-odd, .home-odd a:hover, .home-odd h1, .home-odd h2, .home-odd h3, .home-odd h4, .home-odd h5, .home-odd h6, .home-odd .featured-content .entry-title a, .home-odd .widget-title {
     color: #FFF;
     line-height: 1; /* add this line */
}

Adding a line-height of 1 there, seems to do it. If it doesn't do it in your style.css, you will need to add !important. That's an exclamation mark in front of it.
line-height: 1 !important;

The line-height for the widget text is also being styled by the image-mapper, line 225

body {
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 14px;
     line-height: 20px;
     color: #333;
}

Find this in your style.css

body {
color: #000;
font-family: 'Sorts Mill Goudy', sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.5;
}

add !important after
line-height: 1.5 !important;

---

Marcy | Amethyst Website Design | Twitter

[rayman]

YES! thanks for the clarification

[Marcy]

You're welcome!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts