How can I adjust button and font size for mobile layout?

[AlexDaSilva]

Hi. On my home page I have 2 image elements that have clickable buttons. On the desktop layout the buttons are well sized but when i switch to mobile, the buttons become uncentered and are too big and the font is too big causing it to stack the words on top of each other rather than in one straight line. What code can I used to adjust the button size and font, and centre them on the images, for the mobile layout. Thanks! 

Website is: 

www.prettylittleskin.co.za 

 See mobile layout above, and desktop layout below. 

 

[biznazz101]

You can try this:

Go To Themes> Customize> Click On Section> Add This Code To Sections Custom CSS Settings> Save

.button {
  font-size: 1.2rem;
  letter-spacing: .1rem;
  line-height: calc(1 + .2 / var(--font-body-scale));
  min-width: 150px;
}

Result:

Hope that helps,
@biznazz101 

[AlexDaSilva]

So I've added that code and it changed the font size, however the buttons are still not aligned with the images (see below)