Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

client slider on mobile (responsive)

    • 8 years, 4 months ago flowio
      Participant

      Expired

      Hi,

      Unfortunately, I’m not happy how the client slider is displayed on mobile devices. Only a single icon is displayed and it is not centered. Can I somehow center the icon and display the navigation arrows always on mobile devices?

      Thanks a lot!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      You can change the icons position using custom css. Add this code into your custom css box:

      @media (max-width: 480px){
      .clients_el { left: -17px !important;}
      .clients_el .pagination a {opacity: 1 !important;}
      .clients_el .pagination a.prev { left: -15px !important;}
      .clients_el .pagination a.next { right: -40px !important;}
      .clients_el:hover .pagination a.prev { left: -10px !important;}
      .clients_el:hover .pagination a.next { right: -45px !important;}
      }

      Change the values to your wish. Result screenshot: https://postimg.org/image/xfamedh9x/
      Let us know.

      Best regards!

    • 8 years, 4 months ago flowio
      Participant

      Expired

      Thanks a lot for your great support. Unfortunately the suggested CSS does not have the expected result. The pagination is now always visible, but the client image is still not centered. With the suggested css I can move the arrow and the whole element, but I cannot center the client logo between the arrow.

      https://postimg.org/image/5g9xyxzid/

      Thanks!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      In your case, you need to add this line as well, inside the @media rule:

      .clients .item {
          padding: 0 75px !important;
      }

      The code should become like this:

      @media (max-width: 480px){
      .clients_el { left: -17px !important;}
      .clients_el .pagination a {opacity: 1 !important;}
      .clients_el .pagination a.prev { left: -15px !important;}
      .clients_el .pagination a.next { right: -40px !important;}
      .clients_el:hover .pagination a.prev { left: -10px !important;}
      .clients_el:hover .pagination a.next { right: -45px !important;}
      .clients .item {
          padding: 0 75px !important;
      }
      }

      Result screenshot: https://postimg.org/image/gca6v9prp/

      Best regards!

    • 8 years, 4 months ago flowio
      Participant

      Expired

      Thanks a lot! It is working!

    • 8 years, 3 months ago flowio
      Participant

      Expired

      I discovered a problem. How can I avoid that the arrows are moving on hover? Adapting the :hover elements has no effect.

      Thanks

    • 8 years, 3 months ago Mirela
      Participant

      Hello,

      That’s not a problem. It’s the arrows default style. You can change it using custom css. However, i just checked your site and i don’t get any movement of the arrows in mobile, while on hover.
      Did you perhaps changed it already?
      Let me know.

      Best regards!

Viewing 6 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password