Hello,
I am using the sense theme and was hoping to adjust the size of my ‘buy now’ buttons within the multirow.
example below;
I am hoping someone can help with this.
My website is printreality.co.uk
Thank you.
Topic summary
A user seeks to adjust the size of ‘Buy Now’ buttons in the multirow section of Shopify’s Sense theme.
Solutions Provided:
Multiple community members offered CSS-based approaches:
- Basic padding adjustment: Add CSS to
theme.liquidbefore</body>tag to modify button padding - Width and height control: Insert code in
base.css,style.css, ortheme.csswithin the Assets folder to set minimum width/height dimensions - Font size modification: Additional CSS to adjust button text size alongside dimensions
- Responsive design: Most comprehensive solution uses Custom CSS in the Multirow section settings, allowing different values for desktop (25px font, 10px/20px padding) versus mobile (16px font, same padding)
Key Technical Details:
- Solutions involve editing
theme.liquidor CSS files in the theme’s Assets folder - The responsive approach uses media queries (
@media (max-width: 749px)) for mobile optimization - All solutions include
!importantflags to override existing styles - Screenshots were provided showing before/after results
Status: Multiple working solutions offered; awaiting user confirmation on which approach resolved the issue.
1 Like
Hello @Printatme
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
1 Like
Hi @Printatme
This is Theodore from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Theodore | PageFly
1 Like
Hi @Printatme
I just like to clarify, adjust the width and hieght? not included the font? check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.image-with-text a.button.button--secondary {
min-width: 14rem;
min-height: 6rem;
}
And Save.
Result:
If you like to adjust also the font, check this one.
.image-with-text a.button.button--secondary {
font-size: 20px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
@Printatme , use the following code to add different values for desktop/mobile:
- From the customize page, click on the Multirow section
- Scroll all the way down, click on “custom CSS” and paste the following code in:
.button {
font-size: 25px !important;
padding: 10px 20px !important;
}
@media (max-width: 749px) {
.button {
font-size: 16px !important;
padding: 10px 20px !important;
}
}
25px = font size on desktop
10px = button’s top/bottom padding on desktop
20px = button’s left/right padding on desktop
and the code below:
16px = font size on mobile
10px = button’s top/bottom padding on mobile
20px = button’s left/right padding on mobile
If it helps you please click on the “like” button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
1 Like