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
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.
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
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
25m ago | ||
38m ago | ||
52m ago | ||
an hour ago | ||
an hour ago |