New Landing › How can we help? › Themeforest Theme Support › Dante › Accordions on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Back to forum
    Posted in: Dante
  • September 18, 2015 at 6:47 pm #214629
    tsimarketing
    Member
    Post count: 267

    We have some accordions on one of our pages that holds some information. However, since on the mobile version the accordions have to get skinny so some of the information in them gets cut off. I have attached two screenshots showing that a table with times/dates gets cut off and then some buttons are getting cut off too. The link to the page is tsihealthcare.com/test/mucentral and the password for this page is success. Is there a css code that I can use to fix the information from getting cut off?

    Attachments:
    You must be logged in to view attached files.
    September 21, 2015 at 10:32 am #214909
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    try to add the code below to see if we gain more space in the mobile accordion

    @media only screen and (max-width: 767px){
.spb_accordion .ui-accordion .ui-accordion-content {
    padding-left: 10px!important;
    padding-right: 10px!important;
}
}

    Let us know if it worked, maybe we will have to reduce the font-size a little bit.

    -Rui

    September 28, 2015 at 4:18 pm #216965
    tsimarketing
    Member
    Post count: 267

    I added this css code to our theme options and it doesn’t seem to be doing anything. The buttons with long text and tables are still running off the screen. I have attached a screenshot of it.

    Attachments:
    You must be logged in to view attached files.
    September 28, 2015 at 4:29 pm #216971
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    can you try to place the css on the top of the custom field? You may have some error in other css rule, and all the rules that are below 1 rule with error they won’t work.

    Thanks

    -Rui

    September 28, 2015 at 4:37 pm #216976
    tsimarketing
    Member
    Post count: 267

    I did add it to the top of the custom css field and it didn’t do anything.

    September 29, 2015 at 12:12 pm #217202
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    That’s because the content is too wide for the screen. Tables are unfortunately unresponsive, as they need to keep their structure. The cells have got as small as they can go, that’s why it overflows the accordion. There’s not really anything that can be done about it.

    – Kyle

    September 29, 2015 at 2:00 pm #217236
    tsimarketing
    Member
    Post count: 267

    Ok thanks for clearing the table issue up. But no one has addressed the issue with the text in the buttons getting cut off if the text is long. Is there a css code that can make the long text in buttons go to the second line so you can read it all. I have attached another screenshot so you can take a look at the button.

    Attachments:
    You must be logged in to view attached files.
    September 29, 2015 at 2:37 pm #217248
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Add this:

    a.sf-button.sf-icon-stroke span.text {
  white-space: pre-wrap;
}

    – Kyle

  • Back to forum
    Posted in: Dante
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.