Slider | PenciDesign Support

SophieBenson replied

8 years ago

Customer Reply

Thank you so much, that did the trick for changing the size.

PenciDesign replied

8 years ago

Staff Reply

Hi,

If so, please try replace the code I sent to this code:

\
@media only screen and (max-width: 1170px){\
.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; }\
}\
@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 started the conversation

8 years ago

Conversation Start

Hi, I was having an issue with my slider not adapting to different screen sizes and being cut off at the sides.

You gave me some code (which I've copied below) to put into custom CSS, however, it only works for phones. So on iPads, Macbooks etc, the slider is still cut off at the edges.

Is there any way to solve this please?

Thank you

The code you gave me:

@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; }
}

\

@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; }
}