On mobile the buttons are weird and I don’t know how to adjust the code only for mobile, thank you to anyone who helps.
store link: https://psyco-jewelery.myshopify.com/collections/all
Topic summary
A jewelry store owner is experiencing layout issues with buttons on mobile devices and seeks help adjusting the code specifically for mobile view.
Proposed Solutions:
Two support representatives offered CSS-based fixes:
- StoreSurgeon suggested adding CSS code to the base.css file targeting button width adjustments
- GemPages provided a two-step approach:
- Navigate to Edit code in Online Store
- Add custom CSS code above the
</body>tag in the Theme.liquid file
Both solutions involve inserting CSS snippets to modify button styling for mobile displays. The discussion includes screenshots demonstrating where to implement the code changes.
Status: The thread remains open with no confirmation from the original poster about whether either solution resolved the issue.
Please paste this code in base.css file
.multicolumn-buttons-add .my-button-multicolumn {
width: 100%;
}
Hi @JeffRandal1238 ,
Glad to support you today.
You can check out my suggestion below to get your concern resolved:
- Go to Edit code on Online Store:
- add my code above the tag on Theme.liquid:
Eg:
I hope you find the answer helpful.
Kind & Best regards,
GemPages Support Team.