DEBUT THEME: Separate coding for mobile and desktop versions of a theme

New Member
2 0 0

Everything is working great on my website on the PC however mobile version some menu items and drop downs are restricted by other components on my page.

Under Debut Theme, is there a way to seperate and adjust these components? 

So far, all changes made under purely customizing the page, obviously changes both mobile and PC versions and I am not happy with PC version looking that way. So I am assuming it is coding, if this change is at all even possible...?

Your help is appreciated!!! 

0 Likes
Shopify Staff
Shopify Staff
835 85 159

Hey there Kristy,

Bo here from Shopify Support!

That is a wonderful question! I did some digging into this for you and found that the mobile version of the site can be edited independently to the browser version through some custom CSS. From the theme.scss.liquid you can add your mobile style rules within the media query brackets:

@include media-query($small) {

}

In the liquid, it is slightly more complex however you can use "small--" prefix on your classes to set widths etc.

I understand that this level of coding can be complicated. If any of what I have explained does not make sense to you or if you are uncomfortable making these changes yourself I would recommend sending us an e-mail on support@shopify.com detailing what changes you would like to be made to the navigation on both the mobile and desktop version of your site. If you get back to me here with the ticket number that is automatically generated I will be able to send this on to our theme team for you!

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best,
Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
2 0 0

Hello.

 

I made changes to my Debut theme in order to make the slideshow images "clickable" but although it works on pc's, it does not work on mobile (the whole image does not even display..). I made the below changes from this link:

 

https://community.shopify.com/c/Shopify-Design/Slideshow-Clickable/td-p/447698

 

From what I understand, changes also needs to be made to the "mobile" code - is this correct? If so, are you please able to assist as I am unsure of where to find this.

 

Thanks

0 Likes