I'm having problems with the mobile/tablet flip boxes on my website. They don't resize the front image when moving to different screen sizes. Do I need to add custom CSS and if so what should it be? Also what is the optimal image size that I should be creating for flip boxes?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks. That's great. Only issue now is that landscape on mobile or tablet they don't resize but they do portrait. Could you suggest any further code that I can add to help with this, please? Much appreciated.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi,
I'm having problems with the mobile/tablet flip boxes on my website. They don't resize the front image when moving to different screen sizes. Do I need to add custom CSS and if so what should it be? Also what is the optimal image size that I should be creating for flip boxes?
Thanks,
Michelle
Hey,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.flip-box-front { background-size: 100% !important; background-repeat: no-repeat !important; }Thanks
ThemeNectar Support Team
Hi,
Thanks. That's great. Only issue now is that landscape on mobile or tablet they don't resize but they do portrait. Could you suggest any further code that I can add to help with this, please? Much appreciated.
Michelle
Use this css instead of the earlier given.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.flip-box-front { background-size: contain !important; background-repeat: no-repeat !important; }Thanks
ThemeNectar Support Team
Thank you so much, such a great help!!!
Michelle
Hello,
May be it would be interesting to add the flipbox "background" in order to complete the help :
.flip-box-front, .flip-box-back {
background-size: contain !important;
background-repeat: no-repeat !important;
background-color: #f2f2f2 !important;
}
*Background is optional on there. You can change according your background color.
Cheers
M.Pepper