Looking for a way to resize image/button differently in mobile

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!

Url is sparksandwirycries.org

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;
}
}

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? 

Did you solve or still need help? I see you marked questions as answered.

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

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