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?
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.
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
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
Hi, thank you for the quick response. I tried that and it seems to make the slider disappear on mobile and tablet view.
Hi,
Please put the code to Custom CSS box and save it to I can see what's problems.
Best Regards,
PenciDesign
Done! The image disappears and I just get the dots
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
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.
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
That has solved it! Thank you so much!