Testimonial – set height

[sharonq]

I would like to set the height for a testimonal on my front page so that the next element is in a fixed position.

I used firebug and I believe the element is tb-testimonial standard,

I added a CSS class of “front” (testimonial on the front page) via Edit Display but everytime I go back the CSS class is wiped out.

I tried:

tb-testimonial standard,
.front {
height: 600px;
}

and then I tried:

tb-testimonial standard { height: 600px; }

but neither work.

I know I am missing something simple.

website: horsesense.ca

I am able to use the Custom CSS to change fonts but am not sure how to lock the height of the testimonials.

Topic

[Jason Bobich]

Hi,

1. In CSS, when you want to use a class as a selector, you need to prefix it with a period . — For example, if you want to style this:

<div class="bar">
    ...
</div>

This is a class, right? So we need to prefix it with a period like this in our CSS when we style that element:

.bar {
    ...
}

2. Now, if that div.bar element is within another element like this:

<div class="foo">
    <div class="bar">
        ...
    </div>
</div>

If you want to target the div.bar specifically when it’s within div.foo, you’d separate the classes by a space:

.foo .bar {
    ...
}

3. Now, what if you have those two classes attached to the same element, and you want to target only elements that have both of those classes?

<div class="foo bar">
    ...
</div>

Now, there’s no space between the classes:

.foo.bar {
    ...
}

---

So, now you want to style an element when it has both classes tb-testimonial and standard, can you see how this wouldn’t make sense?

tb-testimonial standard {
    ...
}

Note: I didn’t mention about the “front” class because I searched the source code on your site, and I don’t see the class “front” anywhere in your homepage.

[sharonq]

Ah – thank you.

So first I forgot the dots and then I needed to leave out the space.

.tb-testimonial.standard {
	height: 600px;
}

is working

I would like to ensure that only this one testimonial has this height so I added the “front” class (I checked it saved this time) but this did not work:

.tb-testimonial.standard.front {
	height: 600px;
}

how do I use the “class” in testimonial properly?

• This reply was modified 6 years, 11 months ago by sharonq.

[Jason Bobich]

By simply inspecting the element in your browser’s developer console, you can quickly see the markup structure of your site. If you do this on your site, you’ll be able to see where <div class="tb-testimonial standard"> is, relative to your wrapping element with your class added.

So, knowing that <div class="tb-testimonial standard"> is an element inside your front class, how would you re-write your selector?

[sharonq]

Ah – so “Front” class is first because “tb-testimonial standard” is inside front (point 2 above) so I have a foo bar inside a foo 🙂

CSS now reads:

.front .tb-testimonial.standard {
	height: 600px;
}

and works just fine.

If you ever add a ‘Dummies” section to the website where you put tips for newbies this would be a good one to include – also the instructions on how to change the font colour and width of the websites.

Jumpstart is awesome and it allows me to do so many great things but my CSS gets rusty and then I struggle with simple stuff.

You have an amazing way of explaining things.

BTW Congrats on your new level.

[Jason Bobich]

Thanks!

[Author]

Replies