My client’s homepage LayerSlider was offset horizontally somehow. We’re on the latest Enfold 4.0.5, but LayerSlider says 6.2.2 is out-of-date (6.4.0 is available.
Anyway, through the Inspect tool, I saw that disabling a rule in enfold/css/shortcodes.css fixed my problem, allowing the LayerSlider element’s CSS to take effect. I disabled the rule on line 4470:
#top .avia-layerslider .ls-wp-container{
/* margin:0px auto !important; */
}
My question is: if I wanted to put this modification into my child theme, how would I do that? Or, is there a better way to solve this problem, where the slider was moved to the right of center?
Oh, the slider was fine when the window was narrowed down, but it got worse and worse as I widened the page to 2560px.
Hey launchmoxie,
You don’t have to add !important. You can actually override the shortcode.css style directly on style.css or the Quick CSS.
Best regards,
Jordan Shannon
I didn’t add “!important” myself, actually… it was there. I know I can override things, but what would I override it to, though? I tried “inherit”, but that didn’t work, and I really want that rule to be disabled, to not be considered at all.
Pardon if this is a basic CSS thing.
Hi,
I’m not sure, but maybe something like this would work instead of the current CSS?
#top .avia-layerslider .ls-wp-container{
margin:auto;
}
Best regards,
Rikard
I think that did it! Thank you.
Hi,
I am glad this was able to be fixed. If you need additional help, please don’t hesitate to contact us here on the forums.
Best regards,
Jordan Shannon