Jardena Posted December 12, 2022 Share Posted December 12, 2022 Hi all! I built a website for this non-profit, and am using images as buttons on the homepage in order to create a graphic look and link to the three main actions they are expecting visitors to the site will want to do. However, because I've made these buttons as images with embedded links, their size looks strange on mobile (too big and out of proportion with the first graphic on the site). Is there something that I can do to make these size differently on desktop vs mobile? They are using 7.0 and the Tudor template. Your help is so appreciated-- as well as any other feedback you might have for me! Link to comment
Jardena Posted December 12, 2022 Author Share Posted December 12, 2022 Url is sparksandwirycries.org Link to comment
tuanphan Posted December 15, 2022 Share Posted December 15, 2022 Try adding to Design > Custom CSS /* resize image buttons on mobile */ @media screen and (max-width:640px) { div#page-62f41e53d725db489dde5edb>.row:nth-child(2) .has-aspect-ratio { 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
Jardena Posted December 27, 2022 Author Share Posted December 27, 2022 Thank you so much for taking the time to answer! Unfortunately, the code you provided seems to be making the images stretch in a strange way. Do you know if there is a way that I can maintain the aspect ratio? Link to comment
tuanphan Posted December 28, 2022 Share Posted December 28, 2022 Did you solve or still need help? I see you marked questions as answered. 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
Jardena Posted January 7 Author Share Posted January 7 Hi @tuanphan! Thank you so much for your help. No, unfortunately, it didn't resolve the issue- sorry for the confusion. I switched the images to buttons in an effort to help with resizing on mobile, but now am dealing with an issue of the buttons being different sizes and that impacting the spacing. Is there a way to make the buttons on this webpage a uniform size (or ratio, so they resize well on mobile) instead of having the size be impacted by the length of text? Again, we are looking at this webpage -- www.sparksandwirycries.org Link to comment
tuanphan Posted January 8 Share Posted January 8 2 hours ago, Jardena said: Hi @tuanphan! Thank you so much for your help. No, unfortunately, it didn't resolve the issue- sorry for the confusion. I switched the images to buttons in an effort to help with resizing on mobile, but now am dealing with an issue of the buttons being different sizes and that impacting the spacing. Is there a way to make the buttons on this webpage a uniform size (or ratio, so they resize well on mobile) instead of having the size be impacted by the length of text? Again, we are looking at this webpage -- www.sparksandwirycries.org Hi, It looks same size to me 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
Solution Jardena Posted January 8 Author Solution Share Posted January 8 Hi @tuanphan! I added this CSS, based on some fiddling around! Thanks for looking at this again, glad to see the code is working. /* lg button styling */ .sqs-block-button-element--large { width: 65% !important; } tuanphan 1 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