Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #343937

    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,
    Jan

    #343960

    And 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 :)

    #344611

    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,
    Elliott

    • This reply was modified 9 years, 5 months ago by Elliott.
    #344950

    Hey 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,
    Jan

    #344976

    Hey!

    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,
    Elliott

    • This reply was modified 9 years, 4 months ago by Elliott.
    #345187

    Hey 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 :)

    #345190

    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 :)

    #345397

    Hey!

    Try adding this,

    @media only screen and (max-width: 767px) {
    .av-special-heading-tag {
        font-size: 30px !important;
    }
    }

    Best regards,
    Elliott

    #345475

    Hey 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,
    Jan

    #345476

    PS: It should say “WEBIGAMI” – not “WEBIGA” ;)

    #345727

    Hi!

    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,
    Ismael

    #422911

    Hello, 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

    #423015

    Hey!

    Can you please post the link to your website?

    Regards,
    Yigit

    #423318
    This reply has been marked as private.
    #423902

    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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.