How can I customize the mobile Debut theme without affecting the desktop version?

Store Design
1

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.

2

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.

1 Like
3

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.

4

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.

1 Like
5

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.

6

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;
}
2 Likes
7

Thanks a lot! Now it is just as I wanted it to be.