[mauibrew]

Hello, I purchased a html template from Themeforest and so far in making my own adjustments everything has been going very well.

The website has standard and responsive CSS ability and re-sizes/scales properly in most situations as expected.

However I've added a quote box with images on my front page (wasn't part of the original website purchase) and when I make my window smaller on the PC the image background for the quote bubble isn't scaling even though the text inside seems to be. I have no experience with responsive css so I'm totally stumped and I can't seem to find tutorials online that explain this particular problem.

Website - hdrealestatevideo.com

Below is the quote code that I added to the standard css. On the responsive CSS I've tried some things like [CODE] .quote, .lt-ie9 {width:auto}[CODE] which seemed to help the text areas scale but the background image isn't scaling properly. Any help is appreciated, thank you so much.

[CODE] .quote {
width: 240px;
background: transparent url("../images/quote-small-repeat.gif") repeat-y 0 0;}
.quote .quoteBox-1 {
padding: 17px 0 0;
background: transparent url("../images/quote-small-top.gif") no-repeat 0 0;}
.quote .quoteBox-1 .quoteBox-2 {
padding: 0 0 24px;
background: transparent url("../images/quote-small-bottom.gif") no-repeat 0 100%;}
.quote p {
min-height: 25px;
font-style: italic;
font-size: 1.1em;
line-height: 1.7;
color: #000;
padding: 0 22px 1.2em;
margin: 0;}

.quoteAuthor { padding: 0 0 1em 22px;}
.quoteAuthor p.name { font-weight: bold; font-size: 1.1em; color:#000; margin: 0; }
.quoteAuthor p.details { font-size: 0.9em; font-style: italic; }
[CODE]