Blockquote appearance on mobile devices

[Julia_Goldberg]

I have designed a product page template for a specific product which includes some testimonials that rotate (jquery script). It works great on desktop, but in the mobile view, the quote is either cut off and the text lines up in a narrow, very difficult-to-read arrangement. Is there a way to have the styles be responsive to device size to avoid this?

http://www.luckydesignmedia.com/products/lucky-clown-cards#testimonials

[Alex135]

You'll need to know a bit about CSS.  Here's something that you can add to the end of CSS file (timber.scss.liquid) to get you started.

.rslides {

  // Styles when in mobile view
  @include at-query ($max, $small) {
    blockquote {
      font-size: 1em;
    }
  }

  // Styles when in tablet view
  @include at-query ($max, $medium) {
    blockquote {
      font-size: 1.2em;
    }
  }
}

I hope this helps.

[Jurgen_Feuchter]

Hmmm your problem comes from 2 sides xD one is the js which makes the box height:818px; and then there is the font size and padding of each li box. I tried it on my computer and the next code seems to have fixed that problem for mobile:

@media only screen and (max-width: 420px) {
 .testimonialSlider figure {
    margin: 0;
 }
 .testimonialSlider blockquote {
    font-size: 1em;
    margin-top: 20px;
    padding: 10px;
 }
 .testimonialSlider li {
    height: auto !important;
 }
}

You can paste this code on your main css style sheet or simply add this code:

<style type="text/css">
@media only screen and (max-width: 420px) {
 .testimonialSlider figure {
    margin: 0;
 }
 .testimonialSlider blockquote {
    font-size: 1em;
    margin-top: 20px;
    padding: 10px;
 }
 .testimonialSlider li {
    height: auto !important;
 }
}
</style>

to the product.liquid on the very top :P see if that solves the problem for you :D 

good luck! :D

[Julia_Goldberg]

Alex- Thank you that did help with the font size but the quotes were just getting cut off due to the fact that the div was a fixed size as Jurgen pointed out.

[Julia_Goldberg]

Jurgen- Thank you so much this was a huge help! Pasting the <style> at the top of the product page worked, for some reason adding to my CSS was causing an error. Either way, got it to work beautifully on mobile!