How do I make it so the images don’t get cut on the mobile version – http://thatmastermind.com
Hey yifatcohen,
Thank you for the inquiry.
We cannot make them the whole image fit inside the cell without distorting them, but we can adjust the position of the images in the container so that the people in the images are still visible on smaller screens. Please add this css code.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.flex_cell.av-le91a6f2-cd0064c34a2eb0c0e4fb89716913af3d {
background-position: 80% 50%;
}
.flex_cell.av-le91fnk5-3cbf18b8d7d0e7a627d01cc3162d2670 {
background-position: 80% 50%;
}
}
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.
Best regards,
Ismael
Do I need to change anything here – .flex_cell.av-le91a6f2-cd0064c34a2eb0c0e4fb89716913af3d
cuz it doesn’t seem to work..
Hi,
Thanks for the link to your page, as I understand the issue on mobile the 3 grid row cells with only background images for the columns Communicate, Reach, & Convert
are very small and don’t show the full background image, this is because background images don’t have a height to add to the element.
Try adding a separator/whitespace element to the empty cells with the background image and set a height you wish for mobile.
Best regards,
Mike
That worked. thank you!
Hi yifatcohen,
I’m glad that Mike helped you :)
Thanks for using Enfold and have a great day!
Best regards,
Nikko