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

Topic summary

Issue: On mobile, buttons overlaid on two homepage images appear oversized, off-center, and the text wraps vertically; desktop layout looks correct. The site URL and comparative mobile/desktop screenshots are provided, which are central to understanding the problem.

Proposed fix: A helper suggested adding custom CSS via Theme > Customize > Section > Custom CSS:

  • .button { font-size: 1.2rem; letter-spacing: .1rem; line-height: calc(1 + .2 / var(–font-body-scale)); min-width: 150px; }
    This targets button typography and minimum width (CSS = styling code; rem = font-size unit), and shared screenshots of the outcome.

Result: The change successfully reduced font size, but the buttons remain misaligned with the images on mobile. Alignment/centering was not resolved by the provided snippet.

Current status: Unresolved and ongoing. Key next step is mobile-specific CSS to control positioning/centering of the button overlay relative to the images (e.g., alignment within the image container), not just font sizing.

Open question: What additional CSS (likely layout/positioning rules for mobile breakpoints) is needed to center the buttons over the images on mobile?

Summarized with AI on January 4. AI used: gpt-5.

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.

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

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