slider plugins not displaying correctly (Soliloquy)

Travelify
1

I have a very simple travel blog and I’m having a problem getting slider plugins to work correctly. I was using Huge-It slider but it was taking an incredibly long time to load, sometimes not all the images would load, and sometimes it wouldn’t load at all. I switched to Soliloquy recently and it loads better but when I set the location of the slider to “center”, the forward and backward arrows are centered but the image is slightly off center to the right. It looks awkward. At the moment Soliloquy is the only plugin I have activated so I don’t think it’s a plugin conflict. Also, when I switch to Twenty Sixteen theme the problem goes away, leading me to think the issue is with the theme. Is there a setting somewhere in Travelify theme that I may have set incorrectly that would cause this? Or is there another solution? I’m not experienced with coding so unless you can tell me exactly what to write and where to write it, it will probably be over my head. Here is a page showing the current problem. About half way down is a slider with a bunch of underwater coral photos.
http://www.snorkelbandits.com/?p=49
Thanks for your help

2

Hi @browski,

I hope you are well today and thank you for your question.

You can try resolving this issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

#main #content .soliloquy-slider {
    margin-left: 0;
}

Best Regards,
Movin

3

Hi Movin,
That seems to have fixed it. I really appreciate the help. I don’t want to waste too much of your time but if there is a quick explanation for why this happened I’d be interested in knowing it just in case I encounter similar problems in the future. If it’s too complicated to explain briefly I understand.
Thanks again.
Browski

4

You are most welcome here :slight_smile:

This is happening because we have added some margins to the ul ol lists created in the content using following CSS code in the style.css file of the theme but the soliloquy slider also uses ul tag so this CSS also gets applied on the slider.


#content ul,#content ol {
	margin: 0 0 20px 30px;
}