Divi 3 Example Media Queries in the Divi WordPress theme menu

Divi 3 Example Media Queries in the Divi WordPress theme menu

October 4, 2019 3 By Bernardo Ryan


hi guys and welcome to this Divi
tutorial this is Jamie from system 22 and web design tech tips comm yesterday
we made a video in in that video we were doing some CSS effects and we use some
media queries a gentleman by the name of amar has
asked me a question here I hope I said your name right there he says he wants
to learn more about media queries so I’m gonna make a quick video here just
explaining what they are why we use them Media queries are CSS so I’m using
WordPress here I’m using the Divi theme that’s awesome if you use WordPress you
really ought to consider using it you can get it from a link below this video
but what we’re doing today is pure CSS so it’ll work on a bootstrap site or an
HTML site any site that you can apply CSS to
so I built a little we’ve got three columns here three little text boxes
with an E major title and a bit of text in them now what media queries are
as you’ve got a viewable screen size and you can say well if people are
viewing our screen it’s only so wide I want this to happen or if it’s between
this size and this size I want this to happen
so let’s just demonstrate this I like I say I’ve got four just regular text
blocks with no real decoration or anything going on here
so it that’s good a my option to down in my custom CSS field like I said I’m
using Divi if you’re using it you coded Divi general tab down at bottoms your
custom CSS feel a lot of other themes have a custom CSS field in a
customization which is usually under appearance customize there
let’s make a bit of space now just give it a title I call it media queries it’s
always a good idea to give it a title so you can find it later on for slap star
star forward slash and we do this so it quotes it out so it doesn’t get read by
the browser as code now different devices have different widths screen and
I mean that’s pretty obvious for instance if you viewing on a desktops 24
inch screen I’m working with at the moment it’s probably I don’t know
guessing 1900 by 1080 pixels or something like that I could just check
the video resolution it would tell me and our iPad of course it’s a lot
smaller and on live phone it’s gonna be a lot smaller still so you may want
things to display differently on different device sizes because many
times things can look choked up or out of place when they look
on or in place on a desktop perhaps they’ll be out of place on a phone
so let’s add a media query a typical media query well in fact there’s one
just down below so you always start with that media at medium and then you say screen and
then just open a set of regular brackets and inside here is where you want to put
your media query I’ve got a double there I’m not gonna do that I’ll do that in a
moment that’s saying between this size and this size do this but I’m gonna
start with Mex width I’m just going to say 1200 pics so what I’m saying is I
want something to happen when a screen size has a maximum width that means as
far as it can go of 1,200 pics
now after that I just open and close some curly brackets and anything we put
it in inside here will be applied I don’t need that now
obviously will be applied on screens that are smaller than 1,200
pics screens that have a maximum width of 1,200 lesser or equal to so let’s say
look at what we got here we’ve got four little text blocks let’s give him a
class so we can actually target them with some CSS in this we go to advanced
on the Divi theme here and I’ll give it a class of mq-1 yeah I guess I’ll do the
same for media query one you can call yours whatever class you want whatever
name you want just remember what it is and I’ll do the same for these other
ones here you
you you
um this way we can target them with some CSS because they’ve got a name it’s like
giving him a name a handle if you like update that now if we look at the page itself it’s
pretty you know nothing going on but just to demonstrate this I’m gonna do a
bit of dramatic CFS just just so you can see what’s going on if I hit the f12 key
I’m using Google Chrome here the browser and if you hit the f12 it brings up the
inspector developer tools inspector here and it’s got a responsive tab you can
hit and once you’ve hit it you can drag
things in and out make them smaller as you see it’s it’s shrinking down it’s
responsive this site so it’s the columns are collapsing into one another which is
great and at the top here you can see the actual width of it that first number
there so when I pull it up that number goes up push it back the number goes
down all right so let’s demonstrate some
media queries we’ve given these all a name of mq-1 I believe this is what I
gave them so let’s make something happen Nydia query I just wrote was under 1200
so let’s make something happen when it goes under 1200 to just demonstrate this
let’s go back to our custom CSS so we gave it a class we gave it a mq-1
so it’s class dot and the name mq-1 and open and close some curly brackets in
there and within here we can put our CSS so if we look at our site here let’s do
something dramatic at the moment there’s nothing going on we’ve got an image if
you right-click and inspect it so you got IMG image and you’ve got a heading
tag right click and inspect so that’s an h2 and you’ve got a some paragraph text
which will just be a P see it’s highlighted the P there so we can tell
you all those individually as well as targeting our whole block here
so let’s add some CSS let’s just make the background let’s say blue course the Texas doctor let’s make the
text light let’s say well we’ll leave that for a moment or
just we’re targeting the whole thing there now let’s target the text inside
of it Elia query one key is the paragraph text let’s make that why I
guess so again open and close some curly brackets color once white FFF 6f
and now let’s target that heading so it’s media query one which is the block
and inside is the h2 open close and curlies let’s make that I don’t have to
see yellow it’s just it’s gonna look weird but there we are okay
so let’s see what that does it’s going to look pretty ugly
let’s just save our changes and again if you’re using an HTML site or a bootstrap
site you can just put this in your style sheet or you can do it is inline put it
in the top of your page now if we go back to the page do a quick
refresh now the moment we’re on 1454 when I
shrink down to below 1200 you should see those changes coming to play so here are 12 9450 boom you see the
backgrounds gone now h2 didn’t work but you see the backgrounds changed and
the text has changed to white ah that’s why for the extra V in there now there’s many uses for this like I
say users because things display differently on different devices and it
you can use it to to just make things look better
if you will okay let’s done it see that’s that’s yellow now I don’t know if
you can tell it’s kind of a pale yellow but let’s give that a bit of padding
we want to put a little bit of padding in there because there’s no padding
that’s a look-see you patek give it sort of 15 pics just to
make it look a little bit better like I say this is demo so I’m not too worried
about what its going to look like okay
you so there that’s just added I’ll just
move this down a little bit it’s just added a bit of padding around
the text there so it’s separated a bit alright so
once we go above 12 it goes back to how it was below 12 who’s that
and anything CSS you can do so let’s add another media query and change it again
this time let’s hide the image on smaller devices and let’s align the text
to the right oh let’s Center align it I guess so I’m just going to copy this drop down the line there we go I’ve just copied it now I’m
gonna say let’s see 900 let’s make this background green let’s also give it a border let’s give
it a border I get to pick solid you I’ll spell it right remember if you
spell things wrong when you’re coding things don’t tend to work ok padding
that’s fine here’s the text let’s make this yellow
this time don’t need that hashtag in there cuz
we’re using a color and let’s align the text to Center so we’ll save text-align:center the battle
you know if you’re shrinking down for a desktop it may look great aligning left
on the desktop but then on a mobile phone you may want
it to be centralized because it’s going to be almost a lot more smaller screen
now let’s just make this white you and might decide that we don’t want to
have an image so just look at our site here I’m not gonna do anything just now
but let’s say when it goes to smaller to our 900 let’s say we want this image to
disappear well if we right-click on it I know it’s IMG but you may not so we can
tell your IMG we can make the image bigger or we can make it disappear I’m
going to make it disappear so that will be it mq 1 + OMG is the
image on there and it just gives you so many more options for customizing your
site on various different devices you can ensure that responsibly it’s gonna
work you know so I’ve told it to displaying that my let’s say that go back to our site I’m gonna pull it
above 12 again refresh now when we go below 12 the background
should go blue text white etc then when we go down a 9 or below 9 should turn
green background and that image should disappears let’s
try that so okay we’re down to 12 we saw that already now let’s go down below
nine there we go the backgrounds gone green
and as you can see the images disappeared
and let’s just center align that as well each to color a heifer you you there we go and you can put in different values as
well double values you for instance let’s go back in here see
what was I’ll ask media query it was 900 so let’s just for
copy this again arguments say say we want something to happen between
600 and 700 probably wouldn’t work but just as an example oh I copied that twice let’s get rid of
that okay let’s say we wanted to happen between max width of 800
well it’s a 806 hundred so we need to do just add an and after that open some
more regular brackets and we’ll say min-width of what do we say 908 hundred I say 600 600 pics okay so what we’ve done there a little
extra space in there we’re telling it anytime the screen has a max width of
800 and a minimum width of 600 so minimum of 600 maximum of 800 some kind
of small tablet or something like that or even a large phone we want something
to happen so let’s say make that red just so we can see what’s
very on it’s gonna be extremely ugly site padding let’s drop the padding down
to ten let’s have a yellow border P and let’s have our text
not display at all so I just put display:none heading
we’ll keep it centered um I guess we’ll make that yellow again just trying to
make things stand out so you can see what’s going on
centered that’s far an image this time let’s make our image bigger let’s make
our image give it a width and a height so the moment is 150 by 150 I think and
I know it’s throwing up a flag here I’ll call an F on the nd yellow there he can
be the talking type at the same time okay so image whatever we say we’re
gonna give it a width and a height attribute so let’s say 250 a height I don’t know if it was a square
image or not but let’s put 250 as well it makes May
secure it but skew it that doesn’t matter it’s just for demonstration okay let’s save that so let’s see what we’ve done here that’s
something else down there so we’re going to want this to happen between 800 and
600 pix let’s go back to our site we’ve saved
this do a refresh start back up at the top so 1200 blue 900 was the green and no image there it is and now we said
800 to 600 we want no text image should be bigger 250 and we still got a title
or belief so that so let’s see drop 1100 there we go
and we’ve got no image for some reason we got the yellow border and the the
title why we got no image tell it to display again there we go
you you slightly out of the box there what’s
giving a margin I’ll give it a negative margin on the
top that’ll put it back in the box there you you there we go it’s back inside so okay
we’ve gone that blah blah blah green title no image shrinking down got the
image now then when it drops below we said only wants to do this between six
and eight hundred so what happens when we drop below 600 it revert back to the one that was
before that you and to finish off you could just say
everything anything below 600 I’ll be this one more time so to hit below 600 we want to say
nothing with a maximum width of 600 now we can get rid of em minimum because
we don’t really want this affecting anything and we’ll say background:white whatever you know whatever you want to
do padding 105 that’s why that was not placed okay that was too much there and
I bought a toothpick solid we’ll have our text back each to say library you
we’ll keep it centered image can talk we shouldn’t eat it there and
I’ll fact I’m taking away and the image just
to display that it’s default settings there now I knocked off the last closing
curly brackets you don’t want to do that whenever you’re doing media queries you
want to make sure that at the end you’ve always got to once for the CSS inside
and once for the actual containing media query itself so let’s say that let’s see
what happens now we’ll go back draw it up
how high just one change that padding on this red bit here that’s why I was
knocking that image out so let’s just do that quickly was on this section so
let’s make that ten pics well you let’s make it 25 pics just for effect
you okay so we saved that
the top again refresh start canceling we’ll start dragging it down in size so
1,200 we know what’s going to happen there 900 will be next
there it is and between 800 and 600 there we go so immediately I’ve given it width and a
height so it’s a bigger than the actual element itself and then below 600 so we made that text black you hello 600
there’s the pee display oh we didn’t do anything and just we just told it to
display again so okay let’s say that you there we go
Porter there as well and if that’s not going to change now
because we’ve just said anything smaller than six hundred it wants to do the same
thing then we’ll go back up six hundred plus so I hope that explains things for you
amar Media queries are awesome for making
sure your site user experience on your site you can just keep building and
building and building and make different things happen on smaller screens and
larger screens to ensure that you users get the best experience and everything
can be read there’s best as possible
so they have it there’s a brief explanation of media queries for you and
anything you do with CSS you can put it inside a media query and you can get
some great effects going so I hope that’s been helpful to you please
subscribe to our channel and like the video if you enjoyed this
if you’re interested in web design take one of our web design courses below
we’ve got some huge discounts for our YouTube subscribers there’s some great
free courses down there also so once again this has been jamie from system 22
and web design in tech tips comm thanks for watching have a great day