Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 24, 2019 at 12:20 am #1112781
    adapt

    Pretty much as the title says. We are using an accordion on the site, but when in responsive mode (particularly in mobile phone resolution) the title is too long and runs over the “expand/collapse” button.

    Is there a way to ensure the button has padding around it, so it forces the title text to break to a new line?

    June 24, 2019 at 2:38 am #1112795
    Mike

    Hey Junms1,
    Please include the url to the page in question so we can examine.

    Best regards,
    Mike

    June 24, 2019 at 2:47 am #1112798
    adapt

    Sure, please see below one example. All pages (bar the first one) under the “Services” menu have the same accordion, FYI

    June 24, 2019 at 3:02 am #1112799
    Mike

    Hi,
    Thank you, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.js_active .av-elegant-toggle .toggler {
    padding: 35px 40px 30px 35px !important; 
}
}

    Best regards,
    Mike

    June 24, 2019 at 3:18 am #1112804
    adapt

    Hi Mike

    Unfortunately that didn’t seem to do anything. Also I now notice some odd things about the site – the menu is overlapping the logo in the header, for example. I removed the code you suggested, thinking that caused it, however it didn’t fix that issue. Now I’m trying to figure out whether this issue was on the site before I made this most recent change….!

    June 24, 2019 at 3:52 am #1112808
    Mike

    Hi,
    I checked your page again, but I don’t see the css applied, please try adding to the WordPress > Customize > Additional CSS field and clear your browser cache and check again.
    Please see the screenshot in Private Content area of the expected result.

    Best regards,
    Mike

    June 24, 2019 at 4:02 am #1112813
    adapt

    Hi Mike

    I initially removed it because I didn’t notice a difference. I’ve put it back in, and I think I do notice a difference, however the text still comes very close to the button when testing on 375×667 resolution (iPhone 6).

    In regards to the padding values, is it the “Left Padding” (in bold) that I should change to give it more, er, padding?

    padding: 35px 40px 30px 35px

    June 24, 2019 at 4:13 am #1112816
    Mike

    Hi,
    The 40px value is the right padding to move the text more to the left.
    These values are top, right, bottom, left

    Best regards,
    Mike

    June 24, 2019 at 4:21 am #1112818
    adapt

    Ah perfect. I thought the padding was for the button, didn’t realize it was for the text. That’s fixed it.

    Thanks for your help! Can set this ticket as “Solved” now. Thanks!

    June 24, 2019 at 4:23 am #1112820
    adapt

    Damn it, I spoke too soon. Checking in larger resolutions (ie desktop), and the text is still going over the button.
    Should I simply modify the “max-width: 767px” to a bigger dimension?

    June 24, 2019 at 4:23 am #1112821
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Force new line in title when in responsive (Accordion)’ is closed to new replies.