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:
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?
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:
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
