How to have quotes with variable size. no fix height

Funny, I have this exact same question. Mostly because on mobile it doesn’t recognize that the words are appearing outside the space. Or if you try to use one of the included stylesheets the box goes clear outside of the webpage.

Hey, I think I figured this out.

Short version:
change your css height to a percentage.

Longer version:
Go to your PLUGINS>EDITOR and choose one of the css sheets to modify. )I chose flexi-quote-rotator/styles/wide-plain.css)

I changed the Height and Width to % instead of fixed px. so it looks like this:

#quotearea {
   background: #333;
   width: 65%;
   height: 70%;
   padding: 20px 50px 20px 50px;
   margin: 15px auto;
}
#quoterotator {
   line-height: 120%;
}
#quoteauthor {
   display: block;
   text-align: right;
   font-weight: bold;
   font-style: italic;
}

These specific % work for my specific site to keep the quotes inside the section and the section to auto-resize for each quote size. This also worked to fix the problem of my quotes getting cut off on the mobile version.

My next problem was that without the fixed height, the moment in between quotes that space “blinks”, or shrinks momentarily til the next quote comes up. I found that changing the HEIGHT to 100% in the css and then turning off the fade (change it to 0) in the Flexi Quote Rotator Options page helps minimize the problem though I haven’t been able to eliminate it as of yet.

Hi,

Thanks for the solution. Trying it now.
However wanted to know if the image hieght and width also changes or no?
using default image provided with wide-rounded.css.

Also i see you are using background color and not an image.
I am using this plugin due to the quotes display. is there a way to have quotes getting displayed with background color instead of image if we dont use image and use background as you are using.

Thanks in advance.