Adjusting inline CSS

[webfrogs]

I have a site located here.

When this is viewed on a mobile device, the slider looks like this (I have youTube videos inside the container)…

Image

I can fix this using the Chrome debugger… It’s a bit of inline CSS, but I can’t seem to get to it.

COPY CODE

<div class="caroufredsel_wrapper" style="display: block; text-align: center; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 442px; height: 275px; margin: 0px 0px 0px 20px; overflow: hidden;">

Where is the class “caroufredsel_wrapper”? I’ve looked through every theme file and stylesheet.

Overriding this in the custom CSS section of the editor doesn’t work either.

What are your thoughts on this?

[webfrogs]

??? Can you please respond to this?

[Abe]

Hello, That wrapper is added by the slider script and it doesn’t exist when the page loads. You can add an !important rule to the styles you want to override, eq:
.caroufredsel_wrapper {display: block !important;}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[webfrogs]

That worked fine. You might consider making that a permanent addition since it doesn’t look very good on responsive layouts.

Thanks!

-Jared

[Author]

Posts