ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• September 15, 2015 at 3:27 pm #213199
  mcheck

  Member

  Post count: 44

  We have a clients page that uses the Tour section to show different types of clients.
  It works okay, but is not at all mobile-responsive.

  Wondering if you have a suggestion on what assets to use/replace for the tour that would be make sense with mobile.
  Essentially showing 4 types of clients like we have on the page, allowing the mobile user to either switch between them or scroll to each from a static menu.

  Thanks for your help.

  Mike

  September 16, 2015 at 12:17 pm #213575
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  @media only screen and (max-width: 767px) {
  h2, .blog-item .quote-excerpt{
  font-size:16px !important;
  }
  
  .spb_tour .nav-tabs{
  margin-right:5px !important;
  }
  }

  Thanks
  Mohammad

  September 16, 2015 at 12:18 pm #213576
  David Martin – Support

  Moderator

  Post count: 20834

  Hi Mike,

  Is this specifically for small screen sizes, such as iPhone?

  Using this CSS, should improve the layout for you:

  
  @media only screen and (max-width: 479px) {
  .spb_tour .nav-tabs {
      width: 100% !important;
  }
  .spb_tour .tab-content {
      padding-left: 0% !important;
  }
  }

  Thanks,
  David.

  September 16, 2015 at 3:17 pm #213682
  mcheck

  Member

  Post count: 44

  Thank you both, trying that right now.

  It is not mobile-specific, but it does need to look better on mobile than it does. It’s just not functional.

  Other than the css, would you suggest a different element(s) to use to get the same functionality: The idea of tabbing/selecting a topic header and showing different image grids?

  Mike

  September 16, 2015 at 3:32 pm #213691
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  maybe an accordion will look better.
  http://swiftideas.com/elements/accordion-toggles/

  Give it a try.

  -Rui

  September 16, 2015 at 3:37 pm #213694
  mcheck

  Member

  Post count: 44

  David:

  
  @media only screen and (max-width: 479px) {
  .spb_tour .nav-tabs {
      width: 100% !important;
  }
  .spb_tour .tab-content {
      padding-left: 0% !important;
  }
  }
  

  Is overruled by responsive css:
  Result:

  
  media="screen"
  @media only screen and (max-width: 479px)
  .spb_tour .nav-tabs {
      width: 30% !important;
  }
  (index)media="all"
  @media only screen and (max-width: 479px)
  .spb_tour .nav-tabs {
      width: 100% !important;
  }
  (index)media="all"
  .spb_tour .nav-tabs {
      float: left;
      margin-right: 10px;
      border-right: 0;
      border-bottom: 0;
      width: 120px;
  }
  

  September 17, 2015 at 10:19 am #214014
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  This reply has been marked as private.
• Back to forum

  Posted in: Cardinal