GeorgeBlackman Posted April 20, 2020 Share Posted April 20, 2020 Hello there, I'm attempting to reduce the size of a line of .pngs on my website so they appear in a 2x2 grid on mobile, rather than in a list of 4 large icons. I've attached screenshots of how they currently look on desktop vs mobile. My custom CSS is as follows: /* tablet screens Clock Icon */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_34588 { width: 40%; } } /* tablet screens Clock Icon Text */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587374368402_8877 { width: 40%; } } /* tablet screens OAP Icon */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_43029 { width: 40%; } } /* tablet screens OAP Text */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_187401 { width: 40%; } } /* tablet screens Truck Icon */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_41600 { width: 40%; } } /* tablet screens Truck Text */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_242625 { width: 40%; } } /* tablet screens BBQ Icon */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_218809 { width: 40%; } } /* tablet screens BBQ Text */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_29583 { width: 40%; } } /* tablet screens Loc Icon */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_44470 { width: 40%; } } /* tablet screens Loc Text */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587377884083_196714 { width: 40%; } } I've used a rule for each icon as well as it's description. It has worked in reducing the size of each icon, but they still appear below each other, rather than pushing up into a grid. If anyone can help me push these images into a grid (I'm happy to reduce the size further if needs be) I would be eternally grateful. P.s I realise I have 5 images in a row at the moment. I'll be removing one of these from the mobile site eventually so it shouldn't matter. Thanks everyone! Link to comment
tuanphan Posted April 20, 2020 Share Posted April 20, 2020 Can you share link to page in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
GeorgeBlackman Posted April 20, 2020 Author Share Posted April 20, 2020 https://rhombus-herring-7b2r.squarespace.com Password: solitude Thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.