Important notice: we will respond to all open ticket requests up until November the 1st. After this date, we will be unable to process the ticket requests here on Ticksy.

Okay
  Public Ticket #1176520
Acccordian title doesn't fit on smaller resolutions
Closed

Comments

  •  2
    rivmediawagga started the conversation

    I've just noticed that on smaller resolutions the titles in accordians get cut-off. 

    see screenshot - http://prntscr.com/f9jx3g

    Can you provide CSS to fix this please.

    Thanks

  •  1,845
    Elated replied

    Hello there,

    We can provide fix for that however since we can not access your page check ti closer. Can you please send us your password so we can actually see your page and try to provide a fix for the issue. Also a workaround can be to reduce accordion's title or use this Custom Css, just paste code below into Elated Options > General > Custom Css filed 

    @media screen and (max-width:600px){
        .eltd_accordion_holder span.tab-title span.tab-title-inner{
            font-size: 11px;
        }
    } @media screen and (max-width:500px){
        .eltd_accordion_holder span.tab-title span.tab-title-inner{
            font-size: 10px;
        }
    } @media screen and (max-width:400px){
        .eltd_accordion_holder span.tab-title span.tab-title-inner{
            font-size: 8px;
        }
    }

     Please let us know if this solved the issue and if not please provide us actual page so we can make customization according to page.

    Thanks.


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •  2
    rivmediawagga replied

    Making the title size smaller doesn't really help me, firstly because 8px is way too small and will make reading the text very difficult. And secondly, the issue is actually present on all resolutions, not just those under 600px wide.

    I saw in the css that you had added a restricted height for the accordian header:

    .eltd_accordion_holder.accordion .ui-accordion-header {
    height: 42px;
    line-height: 42px;
    }

    So when I changed the height to auto:

    .eltd_accordion_holder.accordion.boxed .ui-accordion-header {
    height: auto;
    }

    I could see the rest of one of my questions which was hidden before: http://prntscr.com/faydup

    (The above was being viewed on a desktop with a resolution of 1920px wide)

    I've tried to fiddle with the css a few different ways to try and fix this but can't seem to work it out.

    I've added the above css to the Elated Options > General > Custom Css filed  section and when in there noticed some other custom css that must have been added when I imported the demo content. Does it need to be there?? As I can't see what it is referring to.


  •  1,845
    Elated replied

    Hi rivmediawagga,

    yes, you can leave the other css there. Just add the additional one.


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •  2
    rivmediawagga replied

    But the initial problem still isn't fixed... adding the height: auto; revealed the rest of my question but the layout doesn't not look good. Like I said, I've tried to fiddle with the css a few different ways to try and fix this but can't seem to work it out.

    As for the other CSS you didn't actually tell me what it is even for ?

  •  1,845
    Elated replied

    Hi rivmediawagga,

    Sorry for keep you waiting

    Yes, adding the height: auto; will not solve the issue because that element needs defined height in order to function properly.

    Would you be so kind to send us your wp admin password and username so we can taker closer look?

    Kind regards



    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •   rivmediawagga replied privately
  •  1,845
    Elated replied

    Hi Rivmediawagga,

    here is the css to add to your existing one, this is the best we could do with current design without editing the template files:

    .eltd_accordion_holder.boxed .accordion_icon_holder{
        top: 0 !important;
    } span.accordion_icon_holder:after {
        position: absolute;
        bottom: -.2em;
        left:0;
        content: '';
        width: 103%;
        border-bottom: 2px solid #dadada
    } .eltd_accordion_holder.accordion.boxed .ui-accordion-header{
        text-align: center !important;
    }


    Let me know if that works for you.


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •  2
    rivmediawagga replied

    Thanks guys, your code still didn't have an overly desirable result, but it did help me get to one. 

    If you wanted to use it, here's what I added instead:

    .eltd_accordion_holder.boxed .accordion_icon_holder {
    margin: 0;
    border-right: none;
    }
    .eltd_accordion_holder.accordion.boxed .ui-accordion-header {
    height: auto;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    padding: 17px 60px 13px 0px;
    line-height:22px;
    }


  •  1,845
    Elated replied

    Hi RivMediaWagga,

    I'm glad you've made it work. And thanks for the code.

    Let me know if there is anything else I can help you with.


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.