Hi,
How can I change the size of the ‘See all events’-button on my store - and only on the mobile version?
The size is fine on the desktop version, but the button is WAY too big and ruins the photo on the mobile version.
Topic summary
A user needs to reduce the size of a ‘See all events’ button that appears too large on mobile devices while keeping the desktop version unchanged. Screenshots show the button overlapping the featured image on mobile.
Three CSS solutions were provided:
-
Inline CSS approach: Add CSS within
<style>tags in theme.liquid file above the</body>tag, targeting the button with media queries for mobile screens -
Generic solution: Add media query code to base.css or theme.css targeting screens max-width 768px, adjusting font-size, padding, and max-width (requires replacing placeholder class name with actual button class)
-
Specific solution: Add CSS to theme.css targeting
.btn.btn--primary.call-to-actionfor screens max-width 767px, reducing width to 50% and adjusting positioning
Status: The user thanked respondents, suggesting a solution was accepted. All approaches use CSS media queries to apply mobile-specific styling without affecting desktop display.
2 Likes
Hey @WL101
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hello @WL101
Go to Online Store > Themes > Edit Code >open assets > open base.css Or theme.css file
and add this code at the bottom of the file
@media screen and (max-width: 768px) {
.your-button-class {
font-size: 14px !important;
padding: 8px 16px !important;
max-width: 150px !important;
}
}
Replace .your-button-class with the actual class of the button
Thank you 
Hello @WL101
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
@media screen and (max-width: 767px) {
.btn.btn--primary.call-to-action {
width: 50%;
top: 6rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you!