Shopify themes, liquid, logos, and UX
Hi!
I want to customize mobile version of my store without affecting desktop version. I am using debut theme.
I need the shop now button under the header to be inside the black border on transparent background on mobile, and definitely not on desktop.
Solved! Go to the solution
This is an accepted solution.
Ok, I don't see the css in the inspector, are you sure that you added it correctly?
As the class is only on the mobile button you could try adding without the media query:
.btn.slideshow__btn--mobile {
color: black;
line-height: 32px;
border: 1px solid black;
}
Without a link to your site it's hard to offer advice.
Rather than attempting to alter the position of the item on each size. A simple solution in these cases is often to put the button in both places, and use CSS media queries to hide and show them at the screen sizes you need.
Something like:
/*Hide mobile button on desktop*/
#mobile-button {
display: none;
}
/*Hide the desktop button and show the mobile button on mobile*/
@media (max-width: 740px) {
#desktop-button {
display: none;
}
#mobile-button {
display: block;
}
}
Hope that helps.
Thanks a lot for your answer! mishkajewelry.com - here is my shop. when opened on mobile "shop now" button appears below the header and with no border and if I change the text color to white then it's not visible at all. So what want is to have this button with black text and black borders on mobile, but with white borders and white text on desktop.
Aha ok, in that case open your theme code editor and go to custom.css or stylesheet.css and add to the bottom:
@media only screen and (max-width: 749px) {
.slideshow__btn--mobile {
color: black;
border: 1px solid black !important;
line-height: 32px;
}
}
That will make the changes you need without affecting the button on desktop.
I have neither custom.css nor stylesheet.css, I tried o add the code you shared to theme.css and it did not change anything on mobile.
This is an accepted solution.
Ok, I don't see the css in the inspector, are you sure that you added it correctly?
As the class is only on the mobile button you could try adding without the media query:
.btn.slideshow__btn--mobile {
color: black;
line-height: 32px;
border: 1px solid black;
}
Thanks a lot! Now it is just as I wanted it to be.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024