In this video I demonstrate how to use Chrome Developer tools to troubleshoot elements that look a certain way on desktop and a different way on mobile and how to change the way the elements display just on mobile. In the Developer Tools I find the specific spacing that needs to be changed and then I hop over to Wordpress and show where to add the CSS that will make the change just on mobile.

Front End Developer

Senior Developer

Instructional Design Student Tech

Web Developer

Web Developer/Designer

Web Content Developer

How do I add custom CSS styling for just mobile to my Wordpress website

0:00 Hi there and welcome to Hops Help where we try to answer commonly asked questions in two minutes. The question we are answering today is, how do I add custom CSS styling for just desktop or just mobile to my WordPress website Right here?
0:15 For example, this all occasions limousine website here. If I scroll down to this area, for example, this is something that the client was asking about these three blocks here of different facets of the business.
0:33 They show up like this on desktop and that's fine, but when I open it up in like a mobile view, what I see is that between the blocks there's these different, these, these spaces and they want it to be a seamless list and not spaced.
0:57 So one of the things I can do is I can go and use my inspector in the Dove tools on Chrome and then go to that specific element and see where this is being added.
1:13 So I see here that there's a margin bottom being added at 30 pixels, and that's why it's that way. So if I set that to zero, it pulls it right up like that, that's too much.
1:25 It's pulling it up too far. I can see that the, that the space between the elements is a little bit smaller.
1:34 So if I go on one of these paragraphs, I see that it, the mar the, the padding on the bottom is 1em which by the way is not a very good spacing unit to use, but that's, that's another story.
1:52 If I scroll down a little bit further, I can see down here that the font size for the body is 14 pixels.
2:02 Now if the body font size is 14 pixels, then 1em, basically is 14 pixels. So if I go back to this column, this ET column here, and instead of margin bottom 30px, I can change that to 14px.
2:25 And what I should be seeing over here is that it looks as if it seamlessly all belongs to one list.
2:37 So test, that's where we test it out, right? We tested it in these in the dev tools. So now I take this et underscore, PB underscore column, and I take that over into the dashboard.
2:59 And under appearance in the WordPress admin, I can go to customize and under customize. That's where I will find the additional CSS.
3:16 And look, I've already added a whole bunch of stuff here from some other time. And there's actually stuff on here that is already for mobile and it's max width, nine 80px, just like we saw in the other area in the dev tool.
3:32 So if I go down here and I just add that class that we were looking at, and I add the margin, bottom 14px, and I save that, and I go back to this website and I refresh the page.
4:05 Now it looks just like it always was like this. If I close this back to normal, it still looks the same way on desktop.
4:19 I hope that helped. If you need one-on-one help with WordPress, hop on hops www.hops.io to work with a live expert today.

How do I add custom CSS styling for just mobile to my Wordpress website

Loading...