Shopify themes, liquid, logos, and UX
Hello,
I am trying to adjust the width of my buttons on mobile only. They currently look great and work fine, but i would like to increase CRO by making my buttons on the home page (only) full width.
My website is www.aug11.co.
TYIA
Solved! Go to the solution
This is an accepted solution.
Hi @johnnysays
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> 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 </head>
{% if template contains 'index' %}
<style>
@media screen and (max-width: 767px){
a.button.button--primary {
min-width: 100% !important;
}
}
</style>
{% endif %}
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hi @johnnysays
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> 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 </head>
{% if template contains 'index' %}
<style>
@media screen and (max-width: 767px){
a.button.button--primary {
min-width: 100% !important;
}
}
</style>
{% endif %}
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
That worked perfectly, thank you so much!
Glad that i can help. Have a nice day ❤️
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hello @johnnysays 👋
In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom
@media (max-width: 989px) {
#shopify-section-template--21613601423655__rich-text .rich-text__buttons a {
width: 100% !important;
}
}
The result on mobile
Hope that helps!
Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> element
{% if template == 'index' %}
<style>
@media (min-width: 749px) {
a.button--primary {
width: 100% !important;;
}
}
</style>
{% endif %}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025