Georgiaurie Posted April 21, 2023 Share Posted April 21, 2023 Hello, For my Work page I am using 'inline' image blocks with a hover caption. I was hoping to find a way for the image block to switch to 'stack' for mobile only. This way the work title can be displayed underneath, as hover isn't great for mobile. I have tried finding for a way to do this using CSS code, however no luck so far. I imagine it would be possible though. Thank you Georgia Link to comment
tuanphan Posted April 23, 2023 Share Posted April 23, 2023 If you share link to page where you added image, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Georgiaurie Posted April 23, 2023 Author Share Posted April 23, 2023 (edited) Sorry forgot to attach! https://www.forthepeople.agency/work Edited April 24, 2023 by Georgiaurie Link to comment
tuanphan Posted April 25, 2023 Share Posted April 25, 2023 Add to Design > Custom CSS @media screen and (max-width:767px) { figcaption.image-caption-wrapper { opacity: 1 !important; visibility: visible !important; position: relative !important; overflow: hidden !important; padding: 0 !important; } h2 { margin-top: 0 !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Georgiaurie Posted April 26, 2023 Author Share Posted April 26, 2023 Thank you, that's great. However, is there a way to make it so only the project name is visible. I would like the secondary line that is on some of the projects (eg. 'Building a more playful world for developers, one macroblock at a time') to not be visible for mobile –as it appears odd that only some projects have them when they are all the same size. This is why I thought having it switch to a 'Stack' image block might be a potential approach, as this way I can have it formatted to only be the image title for each project. However, I do understand if this is not the best way to go about it. Thank you. Link to comment
Solution tuanphan Posted April 26, 2023 Solution Share Posted April 26, 2023 Use this new code @media screen and (max-width:767px) { figcaption.image-caption-wrapper { opacity: 1 !important; visibility: visible !important; position: relative !important; overflow: hidden !important; padding: 0 !important; } figcaption.image-caption-wrapper h2 { display: none; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Georgiaurie Posted April 27, 2023 Author Share Posted April 27, 2023 Thank you that works great! Is there a way to make the project name a little closer to the image above? Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 Use this @media screen and (max-width:767px) { figcaption.image-caption-wrapper h4 { margin-top: 5px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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