• Resolved lydiakurnia

    (@lydiakurnia)


    Hi there,

    I’m trying to change the padding and font size of the accordion title via Custom CSS but it wouldn’t let me. Is there a reason why this doesn’t work?

    Thank you so much!

    Regards,
    Lydia

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi,

    Are you using the ‘Settings CUSTOM CSS‘ field of the plugin?

    There was an issue in the ‘CUSTOM CSS‘ field of the plugin. We had fixed it a long ago. Could you please check if you are using the latest version(2.0.3) of the plugin?

    If the latest version is used, hope the issue will be resolved.
    If it still remains using the latest version, please let us check the CSS code once.

    Waiting to hear from you.
    Thank you.

    Thread Starter lydiakurnia

    (@lydiakurnia)

    Hi Uzzal,

    Thank you so much for your prompt response. I just checked and I am using Version 2.0.3.

    The CSS code I put in the Settings is as follows:

    .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a {
    padding: 10px;
    }

    .sp-easy-accordion .sp-ea-single .ea-header a {
    font-size: 14px;
    }

    It is a simple code to reduce the padding and font size of the accordion title, but it doesn’t work.

    Thank you so much for checking.

    Regards,
    Lydia

    I have checked and found that the main stylesheet of the plugin is loading on footer. So, it is overriding the custom CSS styles.

    Recently, we have updated the framework, that might create the issue. Sorry for the inconvenience. We will fix it soon.

    However, if you can add an extra selector to your CSS to prioritize, it will work.
    Example-

    #sp-ea-914.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a {
    padding: 10px;
    }
    
    #sp-ea-914.sp-easy-accordion .sp-ea-single .ea-header a {
    font-size: 14px;
    }

    Here, ‘#sp-ea-914’ is an ID from my shortcode. Please replace the number with your ID from the shortcode.

    You can also use ‘!important’ to prioritize it as it is well-parented.
    Example-

    .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a {
    padding: 10px !important;
    }
    
    .sp-easy-accordion .sp-ea-single .ea-header a {
    font-size: 14px !important;
    }

    Gratitude for pointing out the issue.
    Thank.

    Thread Starter lydiakurnia

    (@lydiakurnia)

    That is perfect – thanks so much for resolving this so quickly! Really appreciate it 🙂
    Have a great day!

    Regards,
    Lydia

    Glad to hear that it is resolved. 🙂

    We feel happy to support our valuable users. If you are happy with the plugin, you can share your experience in the review section. It will help other users to choose the easy one.

    Regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom CSS not working’ is closed to new replies.