In this video I demonstrate how to use Chrome Developer tools to troubleshoot elements that look a certain way on desktop and tablets, and a different way on mobile, and how to change the way the elements display just on tablets. In the Developer Tools I find the specific element that needs a media-query that specifically changes its width and how it displays for only on tablets. Then, I hop over to the Shopify admin and show how to add a custom CSS stylesheet to the current theme. And I show how to add the CSS the new custom.css file that will make the change just for tablet view.

Front End Developer

Senior Developer

Instructional Design Student Tech

Web Developer

Web Developer/Designer

Web Content Developer

How do I add custom styling just for tablets to my shopify website

0:01 Hi there and welcome to Hobbs Help where we try to answer commonly asked questions in two minutes. The question we are answering today is, how do I add custom styling just for tablets to my Shopify website?
0:12 So in this example, if I scroll down to this section right here with three little columns, when I inspect this with the Google Chrome developer tools and look at it in what a mobile version would look like, I can see that these columns are stacked instead of next to each other.
0:38 If I make the window a little bit bigger, like it might look like on a tablet, these columns are massive and they're not next to each other.
0:50 So the client would like to at least have the first two next to each other. And then maybe the last one, just be one large card that can also go next to each other once there's a fourth one.
1:07 When I look for these columns and the dev tools, I can see that these are list items. And specifically it says here that for screens max width 9 89, these are at a hundred percent.
1:30 And let's say we want 'em to be Next to each other. Let's try that. So I made 'em 48 pixels 48%, and now these two are next to each other.
1:45 And then developer tools and I switch over to the admin. I just go to online store and themes is already selected.
2:01 And when it loads, I can go to these three dots right here and just edit code. And when I go into this theme dot liquid, it shows me all the styling that is on here.
2:22 I can see that there's a bunch of styling here. If I keep going, there's this base CSS right here. So what I would do best practice is to take this base css and I'm just gonna copy that and the world and create a custom CSS file.
2:54 Well, it's not a file yet. Add this custom. So it's gonna go look for custom CSS and CSS files. They are generally in the assets folder.
3:08 See here is the base css. Now I could just add custom CSS into this base CSS if I wanted to.
3:16 But now that we've added this custom css, I'm just gonna create a new asset called custom css. Then I go back to my dev tools and I copy this And I paste that in here.
3:54 And I'm gonna make this into a media query. I add that width that we wanted width 48%. And since we did say that that's just for tablets and not for phones or desktop.
4:26 I'm going to go in here and gonna make the minimum width. Let's make that 4 81 pixels. So it's between 4 81 and 9 89 pixels that this style will be added.
4:48 I save that, I go back to our page and I refresh it. And let's see if I scroll up. Yep, there you go.
4:58 These two columns are now next to each other. And if I make that smaller, they are stacked for mobile just like we wanted it to.
5:10 And if I go back to desktop and they're next to each other again. So there you go. I hope that helped.
5:18 If you need one-on-one help with Shopify, hop on the hops@www.hops.io to work with a live expert today.

How do I add custom styling just for tablets to my shopify website

Loading...