Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ralf Koller
Ralf Koller
4,506 Points

em cascading issue - how to revert the font-size of a parent element

I have one issue which is spinning my head right now. I got along with em's more or less well so far but here i ran into a nasty one.

I made a simplified markup example. i have the labels email and address and to the right the indented content. 

<div itemscope itemtype="http://schema.org/LocalBusiness" class="ft-contactbox">
    <span class="ft-label">E-Mail:</span> <a class="ft-labelinfo ft-mail" itemprop="email" href="mailto:contact@mail.com">contact@mail.com</a>
    <span itemprop="address" class="ft-label">Address:</span> <span class="ft-labelinfo" itemprop="streetAdress">Main Street</span>
    <span class="ft-labelinfo"><span itemprop="postalCode">80808&nbsp;</span><span itemprop="adressLocality">Downtown</span></span>
</div>

the font-size is set for the following two selectors catching every element contained within the div ft-contactbox: 

.ft-contactbox span,
.ft-contactbox a

works fine, the only problem the last line has a wrapping span around two spans for the postal code and the town. All spans have the identical font-size applied. problem is due to the wrapping span the displayed font size of the last line is different to the ones for the email and street address and their labels. is there a standard way to revert and adjust the font-size of the last line or would i need another selector in the first place for the appliance of the font-size and to exclude the wrapping span? Best regards r.

Ralf Koller
Ralf Koller
4,506 Points

if i give the wrapping element the font size like above it looks like that ( font-size on the last line is smaller):

https://dl.dropboxusercontent.com/u/8578/wrapwithfont.png

if i exclude the wrapping element from the font-size assignment the size is correct but then the margin-left assigment doesn't fit anymore. tricky. ;)

https://dl.dropboxusercontent.com/u/8578/wrapwithout.png

the css used for indentation is: 

.ft-label {
    display:block;
    text-align:center;
    @include breakpoint(500px) {
        float:left;
        clear:both;
    }
}
.ft-labelinfo {
    display:block;
    text-align:center;
    @include breakpoint(500px) {
        margin-left: 4em;
        text-align:left;
    }
}

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ralf,

You can target the inner span's and give them a font-size of 1em. This makes them the same size as their parent.

So something like:

.ft-contactbox span span {
font-size: 1em;
}

I hope this gets it sorted out for you.

Ralf Koller
Ralf Koller
4,506 Points

thanks for the suggestion but that doesn't help :( somehow if i comment out the two selectors 

//.ft-contactbox span,
//.ft-contactbox a
 {
    @include adjust-font-size-to(18px);
}

all font-sizes and the margin-left positions are equal . as soon as they get applied either the span wrapped line has too much margin left or the font-size of the span wrapped line is smaller than the rest but the right margin-left value - depending on what i do. definitely a cascading issue. but i was even unable to build a pen from it yet reproducing the exact scenario.

Ralf Koller
Ralf Koller
4,506 Points

ok this one fixed it: http://codepen.io/rpkoller/pen/hlHID/

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Glad you got it sorted out. I had originally assumed you had set a certain em size on the span's and that you just needed to get the inner span's back up to the size of their parent.

I did a codepen illustrating what I was suggesting. http://codepen.io/anon/pen/oAwzI/

I guess this does not work in the context of how you're using sass and compass? Or maybe I completely misunderstood your font size problem.

Anyways, glad you got it figured out.

Ralf Koller
Ralf Koller
4,506 Points
Ralf Koller
Ralf Koller
4,506 Points

hmm these two pens illustrated my problem.the span excluded from the font-size assignment: http://codepen.io/rpkoller/pen/gxodt/ ( the margin within the excluded span has a different context now - not the 0.89em anymore but the standard 1 em therefor the indent is larger) . the span not excluded http://codepen.io/rpkoller/pen/fskez/ the font-size is smaller on the second line since the wrapper has an em now too, altering the childs within.

and yep your way is also viable. your hook is the font-size, mine the margin. but basically more or less the same way. i've tried it via the font-size too but i guess i haven't had thought it through completely as well as understood it. so it failed. but guess would work your way too now. but via margins i already managed it so i stick to it now. but thanks again for the input and aid!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I forked your second pen since I think that most closely matched what you originally had. I added the css at the end to change the inner span's font-size. It seems like it's doing what you want. You don't have to exclude the outer span or doing anything with margin adjustments. Everything is the same font-size and aligned on left edge.

http://codepen.io/anon/pen/hEieK

What am I missing? I feel that I haven't understood your problem.