See attached image, at the moment on mobile the penci slider cuts off the majority, and is a square.
Although we do not want the penci slider to be full size on mobile (as it would look too small) we would like it to display at about the same size as the featured category images, so it is less cut off. However, we would like the text to be the same as it is currently rendering on Mobile.
See attached image, at the moment on mobile the penci slider cuts off the majority, and is a square.
Although we do not want the penci slider to be full size on mobile (as it would look too small) we would like it to display at about the same size as the featured category images, so it is less cut off. However, we would like the text to be the same as it is currently rendering on Mobile.
Can you please provide CSS to fix this?
Thanks.
Hi,
Please try add more this code to Customize > Custom CSS to do that:
@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: 66.667% !important; content: '' !important; display: block !important; } }Best Regards,
PenciDesign
Sadly that has not worked, the slider is still showing exactly the same as before...
Hi,
Please try change the code I sent to this code:
@media only screen and (max-width: 767px){ .featured-style-32 .penci-owl-carousel .penci-image-holder{ height: auto !important; } .featured-style-32 .penci-owl-carousel .penci-image-holder:before { padding-top: 66% !important; content: '' !important; display: block !important; } }Best Regards,
PenciDesign
Great! Working well now :)