Penci slider | PenciDesign Support

SophieBenson replied

8 years ago

Customer Reply

That has solved it! Thank you so much!

PenciDesign replied

8 years ago

Staff Reply

Hi,

Please add more this code to Customize > Custom CSS to do that:

\
@media only screen and (max-width: 479px){\
.pencislider-container .pencislider-content .pencislider-title{ font-size: 14px;  }\
.pencislider-container .pencislider-content .pencislider-caption { font-size: 13px; margin-top: 5px; }\
.pencislider-container .pencislider-content .penci-button{ margin-top: 10px;  }\
.pencislider-container .pencislider-content .pencislider-button{ padding: 5px 10px 4px; font-size: 11px; }\
.pencislider-container .pencislider-content .pencislider-title span, .pencislider-container .pencislider-content .pencislider-caption span{ padding: 0; }\
}

Best Regards,

PenciDesign

SophieBenson replied

8 years ago

Customer Reply

Great! That works! The only issue then is that the text doesn't change size with the slider and is cut off. Is that something that can be fixed at all? Thanks so much for your quick responses.

PenciDesign replied

8 years ago

Staff Reply

Hi,

I found the issue, please change the code I sent you to this code:

\
@media only screen and (max-width: 767px){\
.featured-style-31 .penci-owl-carousel .penci-image-holder{ height: auto !important; }\
.featured-style-31 .penci-owl-carousel .penci-image-holder:before { padding-top: 42% !important; content: '' !important; display: block !important; }\
}

Best Regards,

PenciDesign

SophieBenson replied

8 years ago

Customer Reply

Done! The image disappears and I just get the dots

PenciDesign replied

8 years ago

Staff Reply

Hi,

Please put the code to Custom CSS box and save it to I can see what's problems.

Best Regards,

PenciDesign

SophieBenson replied

8 years ago

Customer Reply

Hi, thank you for the quick response. I tried that and it seems to make the slider disappear on mobile and tablet view.

PenciDesign replied

8 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to fixed it:

\
@media only screen and (max-width: 767px){\
.featured-style-31 .penci-owl-carousel .penci-image-holder{ height: 0 !important; }\
.featured-style-31 .penci-owl-carousel .penci-image-holder:before { padding-top: 42% !important; content: '' !important; display: block !important; }\
}

Best Regards,

PenciDesign

SophieBenson started the conversation

8 years ago

Conversation Start

When viewed on mobile, tablet or a small screen, the Penci slider is cut off at the edges. Is there a way to make it adjust to the size of the device it's being viewed on like the rest of my site?

Many thanks