GregR Posted January 4 Share Posted January 4 Hi I'm running off of the Henson template. I've noticed that the featured image that hovers for each page section in the navigation gets cropped or cut off awkwardly when viewing in mobile. Does anyone know a code or solve to have the featured page image scaled down when viewed on a mobile device? See screenshot example below Thank you! Greg Manst2002 1 Link to comment
JayVanDyke Posted January 4 Share Posted January 4 @GregR You could try this in custom css. It should center them right in the middle and make the whole thing show on mobile. This doesn't shorten the section though so it keeps your navigation at the bottom and fills the screen. @media only screen and (max-width: 640px) { .collection-images .image-container { left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; } } ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
GregR Posted January 4 Author Share Posted January 4 Hi @jaeveedee Thanks for the quick response! Just gave it a try but unfortunately it still crops the images. It seems to just allow me to swipe the hav bar down. Any thoughts? Thanks again! Greg Link to comment
JayVanDyke Posted January 4 Share Posted January 4 Is the code still in there? If not can you put it back? tuanphan 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
GregR Posted January 9 Author Share Posted January 9 Hi @jaeveedee Sorry I just saw this. I've put it back just now. Thank you! Greg Link to comment
Solution JayVanDyke Posted January 9 Solution Share Posted January 9 @GregR ah i think i missed one selector and i added a few other things to try to make sure it works. Try this. @media only screen and (max-width: 640px) { .collection-images .image-container img { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; object-position: center; } } GregR, Manst2002 and tuanphan 1 1 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
GregR Posted January 9 Author Share Posted January 9 @jaeveedee Nice!!! It totally worked. Thank you so much! I've been trying to fix this for months. I really really really appreciate it! JayVanDyke 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment