AnaF Posted April 12, 2020 Share Posted April 12, 2020 Site URL: https://www.medizen.es/ Hi! I need to make smaller the 3 images on the 'Beneficios_home' page of the Home menu for mobile devices. I tried this CSS but there is a lot of space in the image, very far from the text and off-center: @media screen and (max-width:640px) { div#block-7a7e47bdae5ddd29adf7 img { width: 50% !important; height: auto !important; transform: translateX(-50%); left: 50% !important; } } Could you please help me? Thanks in advance, Ana website: www.medizen.es Pwd (lock page): Medizentecuida Link to comment
tuanphan Posted April 12, 2020 Share Posted April 12, 2020 try include this code to your media query code div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper { padding-bottom: 50% !important; } 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
AnaF Posted April 12, 2020 Author Share Posted April 12, 2020 Thanks for answering so fast 🙂 I see the right correction in the PC (mobile view), however in the phone the position is no corrected: the image appears cut off and far from the text below. What can I do? Thanks Link to comment
AnaF Posted April 12, 2020 Author Share Posted April 12, 2020 I think maybe I have a solution: <style> @media screen and (max-width:640px) { div#block-7a7e47bdae5ddd29adf7 img { width: 50% !important; height: auto !important; transform: translateX(-50%); transform: translateY(50%); left: 25% !important; } div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper { padding-bottom: 50% !important; } } </style> is that correct? (i have no idea of css.. it's only test and error...) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.