Streamline Pro new Widget CSS

[SimplyAA]

I have created a new widget here http://freespiritwebsites.com/lg/ titled "What Our Clients Are Saying...". I want to add CSS such as padding, background color, etc. I know this is probably really simple but I am doing something wrong as the CSS I've used isn't linking to it for some reason. I have:

.testimonials {	
	background-color: red;
	word-wrap: break-word;
	display: block;
	text-align: left;
	color: #444444;
    font-family: 'PT Sans',sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.625;
    }

.testimonials widget-wrap {
	padding: 64px 0;
	padding: 4rem 0;
}

---

Angela

http://freespiritwebsites.com/lg/

[Au Coeur]

Use #testimonials instead of .testimonials.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[SimplyAA]

I did but it still doesn't work. It won't acknowledge any of the CSS I used. I read somewhere about that I have to use the i selector id and I tried that but still couldn't get it to work. This is what Firebug shows right now:

<div class="wrap">
<section id="text-2" class="widget widget_text">
<div class="widget-wrap">

---

Angela

[Tom]

@AuCoeur is spot-on. Just change your CSS selector to grab the testimonials id (#testimonials) instead of trying to use the class (.testimonials).

#testimonials {	
	background-color: red;
	word-wrap: break-word;
	display: block;
	text-align: left;
	color: #444444;
    font-family: 'PT Sans',sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.625;
    }

#testimonials .widget-wrap {
	padding: 64px 20px;
	padding: 4rem 2rem;
}

Either that or change your HTML to declare class=testimonials and use the appropriate CSS for .testimonials.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[SimplyAA]

Thanks for responding. This is really strange and I feel like I'm missing something simple.... I changed it to #testimonials. I made the background red so it would stand out. Now, the red background shows up on the smaller size screens but not full screen when I check it out at: http://www.studiopress.com/responsive/. (www.freespiritwebsites/lg)

What am I missing?

---

Angela

[Tom]

You've placed the #testimonials snippet inside an open media query for 767px, beginning at line 2147 of your style.css.

You should reposition the snippet to the main section of the stylesheet and close the media query as necessary. Watch out for #homesignup.

(Don't forget to take out the background-color: red; highlight.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[SimplyAA]

Yes! Success! Thank you so much. I thought I was going crazy.

Thanks again Tom.

---

Angela

[Author]

Posts