This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Testimonial – set height

  • Creator
    Topic
  • #25631
    sharonq
    Participant

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #25635
    Jason Bobich
    Keymaster

    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.

    #25648
    sharonq
    Participant

    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, 1 month ago by sharonq.
    #25654
    Jason Bobich
    Keymaster

    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?

    #25664
    sharonq
    Participant

    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.

    #25682
    Jason Bobich
    Keymaster

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.