-
Posts
-
Hi Team,
the large testimonial slider looks bad on mobile:
How can I fix this? Or would it be possible to switch to small testimonial slider in responsive mode?
Thanks and Cheers,
JanAnd one more thing: When I increase the font size of the special headline above 55, it’s been cut at the very right edge on an iPhone 5.
Thx for your advice!
Jan :)
Hey!
There is probably an easier way to do this but I could not think of it.
Try adding both the large and compact testimonials to your page and then switch to the Text editor and add this to the bottom,
<style type = "text/css"> .avia-testimonial-wrapper { display: none !important; } .av-large-testimonial-slider { display: block !important; } @media only screen and (max-width: 767px) { .avia-testimonial-wrapper { display: block !important; } .av-large-testimonial-slider { display: none !important; } } </style>What that will do is display the large testimonial and hide the compact until the screen width hits below 767px and then it will switch them.
As for the font size looking weird go ahead and send us a link and we’ll take a look. You can make it private in your reply if you wish.
Regards,
ElliottHey Elliott,
thanks for your code.
I inserted the code in my quick css (without style type = “text/css”>) instead of the page. It can work globally on my page.
Now, the testimonials won’t be displayed at all on mobile devices:
http://www.webigami.de (at the bottom of the page)
Cheers,
JanHey!
You will need to paste it into the bottom of that page instead of in your quick CSS so it does not get applied globally. Also make sure that you insert a compact testimonial right below the big testimonial.
What this CSS does is just hide the big testimonials and display the compact ones when the screen size is small.
Regards,
ElliottHey Elliott,
although it should work without that workaround (please fix this guys!), this works for now. Awesome!
And I wanted it globally so I left it in Quick CSS and duplicated the testimonials slider and changed one to compact. Now it works as described. Kriesi shoul integrate that in the next update.
Thank you so much Elliott!
Cheers,
Jan :)And, Elliott. Any idea about that:
When I increase the font size of the special headline above 55, it’s been cut at the very right edge on a smartphone. It seems as if the theme doesn’t reduce the font size under a certain percentage or so!?
And my Logo is cut, too (566 × 156 pixels big). Please see here:
Thx for your advice!
Jan :)
Hey!
Try adding this,
@media only screen and (max-width: 767px) { .av-special-heading-tag { font-size: 30px !important; } }Best regards,
ElliottHey Elliott,
thank you! :)
And about the logo? Any idea? On my iPhone 6 plus it looks nice. On an iPhone 5, it’s cut on the right.
Cheers,
JanHi!
The logo looks fine when I checked it. You can adjust the mobile logo with this:
@media only screen (max-width: 768px) { .responsive .logo a, .responsive .logo img { max-height: 65px !important; height: 65px !important; top: 5px; } }Best regards,
IsmaelHello, my question is about the testimonial slider part of this discussion. I was not sure what you meant by:
Try adding both the large and compact testimonials to your page and then switch to the Text editor and add this to the bottom,
<style type = “text/css”>
.avia-testimonial-wrapper { display: none !important; }
.av-large-testimonial-slider { display: block !important; }
@media only screen and (max-width: 767px) {
.avia-testimonial-wrapper { display: block !important; }
.av-large-testimonial-slider { display: none !important; }
}
</style>What I did was add that code to the text editor in the default view. I updated it. Then I went back and activated the Avia Layout Editor and updated that. I also added a large testimonial slider and a compact testimonial slider on top of each other in the layout. When I refreshed the page both the large slider and the compact slider showed up on the webpage (on desktop I only want to see the large slider). On my smartphone, it worked correctly – only the compact slider showed.
So then I went back into the text editor in the default layout editor and the HTML was gone. I was going to delete the code and start over.
Where I am at now: large testimonial slider shows on computer and ipad. No testimonials are showing on my mobile phone.
What I am seeking: I’d like my testimonial sliders to show up on on all devices and computers. I’d like to to look like it fits on mobile. It looks exactly as the original image from above.
Thanks!
LM
Hey!
Please remove following code from Quick CSS
@media only screen and (max-width: 767px) { .av-large-testimonial-slider { display: none !important; }}and add following code to Quick CSS
@media only screen and (max-width: 767px) { #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial { padding: 0px 20px; }}Cheers!
Yigit
- You must be logged in to reply to this topic.