Button doesn't have proper padding when the text has multiple lines

Store Design
, ,

Topic summary

A button with longer text breaks into two lines on mobile view, causing inadequate top-bottom padding. The original poster wants to maintain the existing padding that works well for single-line text.

Visual Issue:

  • Desktop view shows proper padding with single-line text
  • Mobile view displays cramped vertical spacing when text wraps to two lines
  • Screenshots demonstrate the padding discrepancy between views

Solutions Provided:

Approach 1 - Adjust padding:

  • Add CSS to section-image-banner.css increasing padding to 4rem 1rem for mobile

Approach 2 - Reduce font size (most successful):

  • Multiple users suggested decreasing button font size to 17-18px on mobile using media queries
  • Original poster confirmed this solution worked perfectly
  • Prevents text wrapping by fitting content on one line

Approach 3 - Force single line:

  • Use white-space: nowrap with overflow: hidden to prevent wrapping

Resolution: Issue resolved using font-size reduction approach, which maintains design integrity while ensuring single-line button text on mobile devices.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

A button on the homepage contains a longer line of text, which breaks into two lines in mobile view. However the padding doesn’t adapt with multiple lines and I can’t figure out how to fix it. Is there a way to fix it without changing the original padding? Because I think the padding looks fine in single line.

My url is https://lmrv.shop

here it is on desktop view:

Screenshot 2025-04-15 at 2.21.19 PM.png
Screenshot 2025-04-15 at 2.21.19 PM.png1786×1364 120 KB

Here it is on mobile, the top-bottom padding is very narrow:

Screenshot 2025-04-15 at 2.21.39 PM.png
Screenshot 2025-04-15 at 2.21.39 PM.png770×1362 88.5 KB

1 Like
2

Hi @alan0529 ,

Please go to Actions > Edit code > Assets > section-image-banner.css file and paste this at the bottom of the file:

.banner--mobile-bottom .banner__box {
    padding: 4rem 1rem;
}
1 Like
3

Please add this code to the Custom CSS of that section to make it appear one line on mobile.

@media (max-width: 749px) {
    .button { font-size: 18px; }
}

Screenshot 2025-04-16 at 08.51.20.png
Screenshot 2025-04-16 at 08.51.20.png872×1134 64.6 KB

1 Like
4

Hello @alan0529
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media only screen and (max-width: 749px) {
.button, {
font-size: 17px !important;
}

Result

107.png
107.png581×520 53.8 KB

Thanks

1 Like
5

Thank you this worked perfectly

6

Thanks for the help, though it seems to only work at 17px as another mentioned. Still really appreciate the help.

7

Thank you this also worked really well

1 Like
8

Hello @alan0529,

As per your requirement, ​to prevent the button text on your website from breaking into two lines on mobile devices, you can apply a CSS property to the button element. This ensures that the text remains on a single line, regardless of the screen size. Here is the CSS code:

.banner--mobile-bottom .banner__box {
white-space: nowrap;
overflow: hidden;
}

Or you can decrease the button text font size for the mobile device.