hywel Posted July 26, 2023 Share Posted July 26, 2023 Hi! I have this collage of images on desktop view that I built with blocks. Obviously this doesn't translate to mobile view so I was trying to add some code to change it just on mobile view. So far I've managed to reduce the size of the images just on mobile, as they looked massive before, but I'd like to be able to display some of them side by side, at least 2 or 3 of them - is there a code for this that includes block IDs, so that I can select specific images I would like to pair up? This is the code I've used so far: Thanks! Link to comment
tuanphan Posted July 27, 2023 Share Posted July 27, 2023 What is site url? 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
hywel Posted July 27, 2023 Author Share Posted July 27, 2023 (edited) 8 hours ago, tuanphan said: What is site url? https://hywellivingstone.com 🙂 Edited July 27, 2023 by hywel Link to comment
tuanphan Posted July 28, 2023 Share Posted July 28, 2023 side by side, it look like not possible, but you want 1 - 2 - 1 - 2, it is possible or 3 items/row is possible 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
hywel Posted July 28, 2023 Author Share Posted July 28, 2023 1 hour ago, tuanphan said: side by side, it look like not possible, but you want 1 - 2 - 1 - 2, it is possible or 3 items/row is possible That sounds good, I'd be happy to try both! Do you know what the code would be for both of them? Link to comment
tuanphan Posted July 29, 2023 Share Posted July 29, 2023 21 hours ago, hywel said: That sounds good, I'd be happy to try both! Do you know what the code would be for both of them? Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-64b5c4dd2ac8d15fb5d21e8d .span-2:nth-child(3) .image-block, div#page-64b5c4dd2ac8d15fb5d21e8d .span-2:nth-child(5) .image-block { clear: none !important; width: calc(~"50% - 34px") !important; float: left !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment