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; } }
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; }
}
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
Thank you so much, that did the trick for changing the size.