Video Summary

In this lesson we are going to wrap up the about section by handling the 15 years of experience in mobile optimizing this using CSS for this photo. So what I’m gonna do is I’m gonna hop into responsive mode and let’s just see what tablet looks like real quick. This is the lowest that will go tablet looks pretty, pretty good at the with 768 So let’s go to mobile. And if we scroll down, we see that the 15 years of experience is blocking both photos. So I’m going to do is I’m just going to drag this to a point where I think that this will that the 15 years of experience will still work. That little feature will still work. 

But also when it when it was when we might want not display that. So I’m kind of scrolling and what my thought is if I’m at maybe let’s look see what 570 looks like. I think 570 this still works. You can still see the cars you can still see that this is a shot. I think anything really be low that in my opinion starts to I don’t know it starts to lose. It’s starting to cover up and you know, if you come here to lo see if it’s at 475 Then you’re not seeing any of the cars, you know, so this is just my personal opinion, I think right about 575 70 right there and you can see the top five so many then we can leave it there and anything below that. I do not want to have the 15 years of experience to be display. So what if you have elements or pro and you have if you want to purchase the Pro? 

The Pro version, by all means you can and you can come down here and you can put in your CSS. But WordPress gives us a gives us a customization feature through the Customize section over here. That allows us to add additional CSS to our WordPress site without needing to upgrade to the the pro version, right. So if we just open up the Customize section right here into a new tab and we come down here and while this loads, come down here to additional CSS, we can plug in multiple different features, or multiple different CSS stylings and we’ll add it right to the whole website. So what I want to do first is I want to come here and I want to go into inspect mode. 

And what I’m doing is to is that like if you see that I if I hover over the 15 It’s given me a class I want to hover over and try to get like the whole representation of that element. So if I click on this, and we come over here to the HTML and we hover over it, that whole section is being highlighted. Now if I move up the second the smaller image has been highlighted and if I move up again, it’s showing like a larger image. So I’m feeling pretty confident that this whole section right here the like if I target this, like Target this class will be able to not display this and a good way to check this too, is just click at the very bottom and we’ll let you put in your own little declaration. So I’m going to put it in display none and that is not there. So that tells me that I can just come here and if you just click on this box, or on the for the classes, it will highlight it for you. And you hit Ctrl or Command C to copy it. Now let’s go back over here into our additional CSS editor. Now if we scroll down, right, we’re just gonna make sure we’re looking at the same section. So if I come here, and I just open this up, and let’s just do display none right so this is a good way to go. Okay, I’m at this class is actually targeting the feature that I want and now I’m not displayed. So what I’m going to do is I’m gonna come down here, and let’s type in our media query. And if you want, you can go back to the media queries in the CSS course. 

And we’re going to open these brackets, and we’re just going to give us some room right here. And now what we can do is we can come here and we can cut this out so Ctrl or Command X and then we can just put this down in here. And now we are seeing this but what we’re saying with this media query is that from 570 pixels and below we do not want this displayed. Alright, so if we wanted to see if we wanted to still show at seven, or 570. We could always go back here and do 569 If we wanted to. 

Right. So how do we how can we check this we can check this in a couple different ways. I what I’m buying in here, I like to just click on the phone right here because you got your desktop tablet phone. If we go here, and we scroll to our section, right. We see both of our pictures and we don’t see that 15 years of experience. So I’m thinking this is going to work. So I’m just going to publish this. 

There’s the publishers just saving your CSS stylings and let’s go to the while we’re still in the Inspect tool. Let’s refresh this so what we should see is we should see ar 15 years of experience. And what we can do is we can come here and just do let’s do 570 And we’ll scroll down and it’s still there. And we got you’ve got these up and down arrows so if you click down, we’re at 569. We no longer see that section. So this is a really cool way to be able to use your additional CSS. target certain elements with your inspect tool. Find the exact class or ID or potentially HTML tag and be able to copy paste that in here and use your media screen max width feature or like little call out, and now you can not display that section. So with that being said, I think we go back and we look at the rest of the it looks like on mobile.