Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 7, 2024 at 4:53 pm #1470848
    zimbo

    I use MetaSlider to create slideshows.

    For years MetaSlider offered several different libraries to create shows, including Flexslider, Nivo Slider, Coin Slider, and Responsive Slides. I have been using NivoSlider without problems for nearly a decade. A few months ago the plugin author decided to focus all development efforts on FlexSlider. Support for NivoSlider (and others) has been retained in the plugin but new features will be FlexSlider-only.

    Because of this I recently decided to look into switching to FlexSlider.

    See this post.

    The top slideshow is a NivoSlider and as you can see it displays perfectly. I duplicated the slideshow and then changed the type to FlexSlider with no other changes and added it as a second slider. You will see the formatting is messed up. The plugin author refuses to look into this, saying there is some custom CSS in Enfold that is causing this (I’m assuming because he believes FlexSlider works and has no bugs). I decided to take a look.

    In my child theme directory there is a file called avia-style.min.css. I do not recall adding this file to the directory and it is not part of the child theme ZIP download at kriesi.at/documentation/enfold/child-theme/

    In this CSS file is this declaration:

    .entry-content-wrapper li {
    margin-left: 2em !important;
}

    If I disable this line in Dev Tools, the FlexSlider displays as it should. Try it.

    #1. What is this CSS file, what does it do and why is it in the child directory?

    #2. What is the purpose of that CSS declaration and why is it interfering with the FlexSlider?

    #3. Whilst I can turn off the margin-left instruction in Dev Tools, adding

    .entry-content-wrapper li {
    margin-left: 0em !important;
}

    to my child theme CSS file does not work. My 0em declaration is loaded but the 2em declaration is still loaded the line above. I have left this in the code on the page so you can verify. How do I turn off, or override, the margin-left instruction on the live post to get FlexSlider to display properly?

    November 7, 2024 at 5:21 pm #1470851
    Mike

    Hey zimbo,
    The avia-style.min.css is created by the theme minification at Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression which combines the css from the other theme css files. In your case, disabling this will not solve for you, because it is added in your child theme css:

    /* bullet points */
.entry-content-wrapper li {
    margin-left: 2em !important;
}

    so you could remove this from your child theme css, or you could override it with this:

    #main .entry-content-wrapper .metaslider-flex li {
    margin-left: 0em !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 7, 2024 at 5:31 pm #1470852
    zimbo

    Hi,

    So here’s the thing. I used to use the theme’s File Compression And Merging feature but no longer do, it is now disabled.

    Am I right in thinking therefore that I can delete this file as it is no longer needed?

    You say it is added to my child theme CSS. How do I need to re-load/re-build that file to make sure the avia-style code is not included anymore to stop the ‘interference’ with FlexSlider?

    November 8, 2024 at 8:08 am #1470882
    Ismael

    Hi,

    Thank you for the update.

    Am I right in thinking therefore that I can delete this file as it is no longer needed?

    Yes, you can delete the minified or compressed file, as it will no longer be loaded by the theme since compression is disabled. Just make sure to create a site backup or restore point before doing so. To override the custom rule for the “li” element, you can add the css suggested above.

    #main .entry-content-wrapper .metaslider-flex li {
    margin-left: 0em !important;
}

    Best regards,
    Ismael

    November 8, 2024 at 1:43 pm #1470905
    zimbo

    The CSS works but I am confused.

    The entry-content-wrapper li declaration was in the file avia-style.min.css and this is what was causing the FlexSlider to display incorrectly.

    I have deleted that file, and therefore it should no longer be loaded, so why is the CSS needed?

    November 8, 2024 at 4:32 pm #1470916
    Mike

    Hi,
    You have added this css to your child theme css:

    /* bullet points */
.entry-content-wrapper li {
    margin-left: 2em !important;
}

    that is the cause of the error, and that is why disabling the theme css compression (avia-style.min.css) will not help you, as I posted above.
    You can remove the css in your child theme css, or use the new css that I posted for your slider. Have you looked at your child theme css?
    This is a screenshot of your child theme css causing the error
    Enfold Support 6529

    Best regards,
    Mike

    November 8, 2024 at 6:53 pm #1470929
    zimbo

    Ooops!

    Mike, apologies, I misunderstood your first reply. I found 

    .entry-content-wrapper li {
    margin-left: 2em !important;
}

    in avia-style.min.css and assumed that was the culprit (well, it was…) but not understanding where it might come from.

    The problem is I have no idea why I added that CSS to the child theme, probably many years ago… :-)

    I have however removed it on the test site without apparent problems. Having done that and removed the avia-style file, I don’t need the metaslider-flex CSS either and the FlexSlider is now working.

    Thanks.

    November 9, 2024 at 11:38 am #1470947
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘CSS in avia-style.min.css breaks MetaSlider – how to fix it?’ is closed to new replies.