Customizing mobile theme Debut

Solved
mishka
New Member
4 0 0

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.

Accepted Solution (1)

Accepted Solutions
DMT-Mat
Shopify Partner
14 1 12

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

 

Need expert help with your Shopify Website? Message me or contact the team.

View solution in original post

Replies 6 (6)
DMT-Mat
Shopify Partner
14 1 12

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.

Need expert help with your Shopify Website? Message me or contact the team.
mishka
New Member
4 0 0

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.

DMT-Mat
Shopify Partner
14 1 12

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.

Need expert help with your Shopify Website? Message me or contact the team.
mishka
New Member
4 0 0

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.

DMT-Mat
Shopify Partner
14 1 12

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

 

Need expert help with your Shopify Website? Message me or contact the team.

View solution in original post

mishka
New Member
4 0 0

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