Sisu_DesignStudio Posted July 14, 2022 Share Posted July 14, 2022 Site URL: https://sprout-alpaca-92j6.squarespace.com/ Hey folks! I added my client's logo to her footer. It looks great on desktop, but on mobile it converts to the full width of the screen. We want the logo image to be smaller on mobile. Is there a way I can do this in CSS? I have tried targeting the padding with no luck. My backup is creating a custom PNG with more padding, but I don't love that option for various screen sizes. Can someone help me out? Site password: kenshosalon Allie | Sisu Design Studio Link to comment
Solution Nabiloh Posted July 14, 2022 Solution Share Posted July 14, 2022 Paste this code in your CSS panel @media only screen and (max-width: 640px) {section[data-section-id="625aceb8fc379b2c56f8e72f"] .image-block-outer-wrapper.animation-loaded { width: 150px;} } You can change the width in the code to the size that best suits your design needs. NadineS and Sisu_DesignStudio 1 1 Link to comment
Sisu_DesignStudio Posted July 14, 2022 Author Share Posted July 14, 2022 @Nabiloh amazing. That works great—thank you so much! Nabiloh 1 Allie | Sisu Design Studio 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