welcome to today’s video todaywe will be showing you an interesting topic and this is makingyour pages fully responsive using GroovePagesthis is a very important topic when you des once you design your pages andlet’s say you use custom blocks and custom containers and custom elementswhen you’re not using the pre-made templates then you actually need to goand make your sites make your pages uh to load nicely on tablet viewon mobile view for everybody that will be watching and visiting your siteto different devices you need to make it uh so they havea very nice experience when they are browsing your siteso this requires a bit of a tweaking your site once you design it for adesktop or a laptop view you actually need to tweak it so that itlooks better uh or good on other devices as welland in this video today we’ll be going through a couple ofsimple steps you just need to make sure you do so thatyou are tweaking your site to look good onsmaller devices as well so we we start and we have already startedcollecting people over here in our live stream so in case you arewatching please jump into the comments just say hihi David i’m here i’m watching and then we will startactually going into the the topics of today i will try to makethis video short for everybody that is watching because i want to keep itas as non-technical as possible i want toactually dive in and i want to show you practical solutions on what you need todo in order to get your site to be mobileresponsive so to actually start i will sharewhat we’ll be working on today um let me just get out of the presentationand then i just quickly create created this site that looks like thisone i’ll be showing you how actually to create a site like this as you cansee it just has a one block it consists of three elementson the page one is a heading another one is thedescription in white and then a button so this iswhat we will be working on today and if you are just joining in pleasesay hi and perfectso i already am getting a couple of messages here from syed he’s saying hiDavid tina joyner saying hi David thanks somuch for all the great training you offer it’s definitely appreciated thankyou very much tina um mubin mukhtar is saying uhhi David um there is ilya saying boom ilya in the house awesome i have afacebook user here saying good morning David good morning to you as wellin case you are not dean then i would suggest you ha to head overto streamyard.com forward slash facebook we have a user called dean and he justcannot get streamyard to work for him but in case you are not dean please headover there and then actually activate streamyard soi can read your name see your profile image whenever you’re commentingso then later on in case you have any question so i can come backand then answer it to you um i have matrixstructure saying hi stewart from uk awesome good to have you here stuartsaying hey David so this is another facebook user preplease as well head over to streamyard.com and then activateso that i can see your uh name when you are commentingi have curly saying hello i have another facebook user super glad to attend yourlive thank you very much uh keisha fox good morning all uh kasimis saying hello good to have you here kasim i have lina from uklina in case you can also head over to streamyard.com pleaseum there is a button in the description of this video orjust type it into your address bar this will actually let me seeyour name whenever you are commenting so i can answeryou specifically um yannick is watching us hereand then ilya already pasted in the the link to the comments eldon ishere from new zealand hello David and allso yeah we have a good crowd watching us today so guys i wanted i want to startwith a game so in case you can see something that is on this side that isnew in case you’re watching my previous videos there is something that is new onthis site and i wanted you to be able to see itfirst it consists of very simple buildingblocks so just a heading description and a and abutton but something on here is new that wedidn’t have before and this came with today’s deployment uh an upgradeso in case you you see what this is in case you’re familiar with the builderthen just type it in the comments and let’s see who found it first this isjust a small game i wanted to start with um janet saying from vancouver hi Davidthank you for being here for us uh thank you very much pablo andjanet is also here saying good morning to everybody so yeahin case you don’t know just type in don’t know in case you know what that isthen type it in okay keisha is giving a guess the background on the pageuh good guess keisha i thought that this will be askedno the answer is no this is not something newhowever i will also try to show you how to actuallycreate a background like like what i haveum scott kane is watching however ilya got it right the backgroundor the icon in the button and this is thecorrect answer so the icon in the button previously we were not able to do iconsin the button without the actual text icon howeverfrom today with a new deployment that we just did there is an elementcalled uh icon button okay so now you can get into the get it intoyour designs and actually when you have somethinglike a facebook social media or somethingfacebook actually put in a facebook icon on itand then choose left or right align the buttonitself and then you can create uh buttons like that so you can actually use now the icons aswell which is pretty cool we didn’t have that one beforebut now it is available and this is what we are using todayso yes ilya you got it right it’s saying geeky meyeah perfect but everybody that tried their guesses thank you very muchand i will be showing you later on how toget this background so this is possible and i will show you howbut today we are focusing on getting the the siteresponsive for mobile devices and i wanted to show youwhat is possible as you can see whenever we we do somethingit has been modified so that it looks goodbut i wanted to show you how i built out this site so we’ll just open a new pageand get started immediately however i just wanted tomention that i will be doing a q a session at the end of the training so incase you have any questions please put a questionin front of your uh your question uh or at least letter q so that when iread the the comments i can just pinpoint theones that have queue or question typed in the beginningof it so i know that this will be a question for meand i can go come back to these very simply later onthe name of this presentation is basics of making pages fully responsiveand the reason is because there is three levels of customization ofresponsiveness customizations that you can do and ijust want to go through those so the first one is basic and the basicconsists of sizing and spacing so whenever you created a site youpulled in the elements and then to make it look good on thesmaller devices you just need to size them and space them properly andbasically that is the basic modification orcustomization what you need to do there is another level whichis more advanced this is when you are sizing and spacingbut hiding and showing elements on different devicesi created a separate video on how to hideelements to show up and to not show up on different devicesso when you’re using all three at the same time this is more advanced it needsmore customization and more time spent on your sites and modifications onyour site then we have the expert which isnot something that i’ve seen a lot of people do but there areuh instances where you want to actually have a completelydifferent way of showing a mobile site from your desktop site in case youwant to to have different images show up onmobile and different images show up on desktopthis is where this complete customization comes in soto do the expert expert customization you would need to hidewhole blocks from different devices and thenredesign complete new blocks on there and then justeverything that you design for desktop hide and then you start from scratch anddesign everything uh especially for mobile i don’t suggestthis one because the code will still be stayingon your uh on your website it will not be itwill just not be showing up but in case you are not there in caseyou don’t need this complete customizationi suggest the basic and advanced is good enough to actually have your siteslook uh very nice on your devices on all devices i mean rem isthe unit which we will be using there is pixelsand there is rem these are like um centimeters and inches so these are twodifferent units of measurement but to actually get umto get really nice looking um mobile responsive sitesin our builder we need to use rem and i will show youa couple of examples later on why um this will be used for uhso the measurements of sizing and spacing what we have at this point arejust a temporary solution later on we will have a drag and dropsolution where you actually click on the border and then you withyour mouse you drag it out and then you make things bigger on the pagethis is coming later on um in august and september this is scheduled forbut until then we can play with the numbers the rem numbers as you seenpadding and margins are increased by these numbers which are remnumbers and also uh the text sizing is alsoincreased by rem and um what else yeah the the sizing so thesizing as well you can also size it with percentages or remsizes so this is what we’ll be diving in today and then i want to show youexactly how to get a mobile responsive site that looks likethis i created a site yesterday and i tried toactually make it fully responsive but there is a couple of elements herethat were just giving me issues so i decided i will create a completely newsite with you guys here show you a couple of tricks that you canalso use in your designs so i will start and design thisexact page from scratch so i i go into the blocks wireframesand i want to choose an empty container from hereimmediately the first thing i will do is just set up my backgroundand i want to show you a cool trick which a lot of users don’t know yetand this is something that people were even complaining aboutand i just wanted to show you that this is not something that you needto actually fear uh you can use this to your advantageand let me just show you what so when you go into yourimages i want to set this up as my background image as you can see this isa 250 by 250image that has one two three four five six sevenicons on it so i can just click select and then here when i set it up it is notvisible because it is a very small image it isprobably somewhere here behind the empty containerbut when i click contain as you can see it is nowcovering the the background and once i print some text or somethingon there on the on the page let’s just use title andparagraph it is actually copying it over so it isrepeating the the background multiple times the same image is being copiedover and this is how i got this kind of lookand layout so let me just show you how actuallyi got into uh doing that so i go to to contain you canyou don’t have to touch anything here but what we need to dois set up the background to be a full height so once we have all thedevices selected everything needs to be pink we go to sizingheight relative to the page then we pull itall the way up 100 viewable height okay or visible height i’m still not quitesure what that is an abbreviation for but then you cansee that my background also increased so i can just clickcontain one more time and now it is looking nicely set upso that it is the background is visible i will just apply some backgroundoverlay like that and now i have a similarbackground like here maybe a bit darker so that it looksmore more clearer and then when i actually go and set up my my colorsi can just choose some bright colors and they will be visibleon the black background now so this is a simple trick that you can useand i will share out as well a site where you can goand create these kind of awesome um awesome patterns these are calledseamless patterns and there is a paternico.com isa page where you can actually create these seamless patterns let me justjust share this link with you guys um i shared it on youtube and i will alsodo it on on you on the facebook group there yougo guys enjoy test it out so what you can do with itis basically start from scratch here in the in the upper leftright hand side corner or if you want you can also modify this look at when iwhen i click on one of these icons and i just pull them overit it moved and then if i increase the size of itit actually updates the rest as well so if you want to start from scratch youcan click create new you pull in an icon and thenyou can create your seamless patterns over hereas well it is looking pretty cool and then later on once you’re done you justclick download as png you click over here uh save imageor sometimes it doesn’t work it still keeps loading what i do isopen image a new tab and just save it from hereso when i save the image then i can pop it in to myGroovePages as a background so i just wanted to share this coolcool tool with you that you can use for creating pages like theseum but yeah let’s just focus on getting the textum set up so i wanted to build out the page and test something out witha reverse psychology everybody is like buy my stuffbut i wanted to do something opposite of that i wantedi will disappoint you guys if you you will not be able to retire 60at 60 years old as your friends and family you will not be workingall day and long all day long commuting to workfor hours as everybody else so in case in case you don’t want to do that incase you like how you live your life don’t click herei i wanted to just test out some uh some things like this everybody is doingjust do this do this but i wanted to try it out and don’t dothis so this is what i will be using today for this training today i willdisappoint you will be our title i will double click onthis title over here and paste in my text over here in thewhite part i will just copy over this descriptionhere double click and then paste in mydescription i want to center align everythingso both of these the yellow text and the white textboth and then i will just choose the containerover here and then make it spaced out so this is justus setting up our page let’s just put 16 remincrease the font today i will disappoint youthat’s fine sig rem is good and then over herei just want to select the whole text insideand make the size text bigger something like this okay now we are justsorry we are just missing a button and i will be using this new button that wehave which is the icon button we have it herenow we just click inside the container wherewe place the button layout and then center it over here soactually i didn’t do it correctly i need to play i need to presscenter it to vertical so container verticalcenter it in the middle and then we have the button centered in the middlewe can do text do not pick here perfect and maybe some star to be your icon okay xli want i’ll just leave it as it is center align left okay perfecti want the text to be black later on maybe this dark gray i want the font tobe bold and just to make the size of thetext a bit bigger like that so now i have a kind of asimilar site built out as i build it out herei just want to work on the spacing of this oneso i’ll select everything here and then i willwork with the margins like that push everythingaway perfect so now i want to show you actually how itlooks like on smaller devices as you can see westill need to work a bit on this sizing of the texton a laptop device on here it looks kind of okay but here we justneed to work with with everything that we have on a tabletand a mobile view as you can see even though we set it up we still needto still need to go into the device itselfand just set it up so that it is looking betterso what i usually do is i uh i go with this one so i finished this and itlook it is looking pretty okay now i just clicked so basically you needto have you click one more time so that your device is chosen what you are goingto edit so when you start you have all of themchosen when you click one more time on the responsiveness tothe device that you want to edit then only this device will be shown upin case you want to choose a different one you justclick over here but the next thing that not a lot ofusers know about is when you click one moretime on this one so then you are designing for thisdevice and all the smaller ones so for example ifyou want to actually edit only the tablet view nowyou click one more time on it and only this willbe shown but in case you want to edit the horizontal tablet the verticaltablet and the mobile view you click one more time so now you willdesign or modify this one but the changes willapply also on the on the vertical tablet andthen the mobile view so this is something that you can playwith but it is actually hard to come back so onceyou are once you do something like this and thenfor example now i want to set up a hover effect so i set up background of thecolor to be this yellow but maybe a bit darkerlike that and i want to set up the text colorto beat here so when i hover it is actually changingthe the hover color however i made a mistake and i didn’tchoose all of these devices so now when we go tothis separate device the hover is not applied so you need to be very carefulbecause when you design something you really spend a lot of timeand then you dove into actually designingsomething let’s say for a mobile device and you made a lot of different changesand customizations but then you realize that you wereediting only that device and then some of the options were notapplied on other ones so you really really need to betaking your eyes up and down to this to these options because once you editit you can actually apply it apply it for examplenow on my my laptop view it is not applying anyhover but once i go into hover i can justsimply apply it over hereagain but it is it is time consuming so take care of watching all the time theseresponsiveness options here perfect so this is what i wanted to showyou this is how the responsiveness selector works once you haveone device clicked and all of them are pink you’re designing for onebut the changes will apply for every devicewhen you have only one device selected one deviceis pink and the rest is white you are onlyediting on that device so this is very importantnow um yes i’m receiving a couple of a couple ofquestions there i will answer them later onhowever i want to just dive into actually sizing and resizing so forexample on a on a desktop view this looks goodthat this is in the middle of the screen over here but on the laptop viewi actually want to to pull this a bit up so i only have the laptop view selectedover here so i will go into spacingand then you can see here i have the button chosen now this one is greenbut the the container and this container over here is the onewhere i applied the the inner padding so i need to gointo the one that i changed on a desktop device as welland i want to just move it up a bit so i thinkit looks nicer when it’s eight rem on a desktop oh sorry on a laptop devicelet’s just go and dive into more into other devicesas you can see in the horizontal tablet view itis still giving us this gap on the top so i will justmove it up a bit over here as well so this is thehorizontal tablet view i can just move it up a bit as well itis looking much better now and then on the mobile i want to move itup as well a bit and then here we go so now here it islooking fine here is looking fine here here here aswell so what next i’m in the mobile view nowbut i don’t like this text is too big i cannot say it is it is broken up so thisis a point and t u so i want to actually break this text up tobe a bit uh or make it smaller so i choose all thetext or or you can just click on the textelement when you have just one paragraph of text i willexplain you later on why i say that or you selectyour text and using the text sizing you can make it a bit smaller sothat it fits the screen so now you don’t have the text broken up intodifferent parts so disappoint is one word todayi will is a is a each of these is nicely visible one wordyou can go into into more sizing for example if you wanted to showup like this you can i believe this is looking nice so i willleave it out leave it as it is however this text is too big for me butwatch this part is one paragraph and this part is another paragraph andwatch what happens when i just click my mouse over hereand i want to resize only the upper text okay so i didn’t break it up but onlythe the upper text should be changing because these are twoseparate paragraphs um yeah it is doing it now for somereason previously it was not but as i clicked on the upper paragraphonly the upper paragraph is changing as you can see here the lower oneit stayed as it was and this is a new feature that was releasedpreviously um i think a week ago or so that we can now edit differentparagraphs with different styling so i want to add on this paragraph of textthis block of text i want to make it red but i want this block of text to stay onwhite so now you don’t need to pull in a lotof different elements on your page you can justwork with one text element but different paragraphs can be styled differentlywhich is i i think it’s a good idea and our developerscreated this one for for a lot of people were askingwhy do i have to have so many elements if i just want a block of text to beseparated and modified so this is why so now i clicked overhere and i resized to 1.5 this text as you can see is stillresized to 2.25 so i want to also make it a bit smaller1.5 good however now you can see that it istouching both of the sides and when you’re reading on a mobile phone you areprobably scrolling with one hand and then yourfinger is in the way most of the time so on mobile i usuallyyou know on smaller devices like mobile and tablet i suggest you to actually puton some padding so while you have this text uh chosenyou select everything over here you select everything like that and thenyou apply spacing padding on left and rightand you push in the text on both sides for some reason it didn’t select the theupper part of the text but you apply padding onon both of these let’s say 1.5 and now it will not be touching thethe letters will not be touching the borders of the screenso it will look more professional it will look more centeredand it will uh be more easier to read so you can gointo depth of how you want to modify it for yourself how you think it looks okaybut this is the way to do it now i just want to movemy button away a bit lower so that it fills outthe the page a bit so i just click on the buttonand move it away using the the top marginsomething like that okay so i think it looks good my button is a bittoo big so i can just modify the text on the button itlooks much better now so now as you can seemy other devices are still too big but the mobile is exactly as i want it to beso the text is sized properly the ping is appliedand my button is looking nice and readableand visible and everything is as as i would hope to look like on a on amobile so this is the basic styling ofresponsiveness we will go through all of thesebut when you are actually designing the page you use a lot of different elementsand a lot of uh different options over here but whenyou’re resizing when you’re doing this basic resizinguh you’re just using sizes and spacing so this is what i’m doing when i clickon the text i’m resizing it and then spacing it leftright or center or doing that using thepaddings and margins or the sizing options here iwill show you later on okay so this is looking good this islooking good as well i just want to make the the textsized a bit smaller so i select my text i go into the text over hereand then i think 4.5 looks great on a vertical tablet the textis looking good i would just like to applysome more side padding over here and then i willselect my text paragraphs and apply some more padding on this oneto be something like 2.5 this one 2.5 is looking good andthe button is styled nicely the rest i will leave as it is on thehorizontal tablet view i want to make this part a bit smaller4.5 is looking good as well laptop and desktop now it looks greatso now when we save it and preview it we can actually test theresponsiveness options of this page like that so when you when you move itto a smaller device it will be scrolling and when we go now smaller and smalleryou will see that the paddings are appliedand not allowing the the text over here to touch the sides of theof the whole of the browser so this is when the responsiveness is goodas you can see over here on this one it said it is today i will disappoint youit is touching the borders of the of thescreen but this is because the sizingof the of the screen itself so this should be like a very widehorizontal tablet view to actually look like this oneso if you want to make sure that this doesn’t happen you can come over here tothe to the to the actual horizontaland the vertical tablet view and you can add on some padding to this part of thetext as well so spacing herewe add on some to rem 2.5 rem let’s leave it at 2.5 we can do italso on this vertical um tablet view we can add on2.5 rem now when we save it that shouldn’t be happening anymorelet’s just test it out okay so we go in thereit is actually still happening but it is it is better when we are viewing it overhere as you can see it is touching on one point onlythe the borders but it is very small and it will not be affectingany changes uh if somebody if somebody is viewing it on a vertical tabletit is it is not a big problem so let me just pull inan image over here and then resize the image now we know how to resize text anduh the button is looking quite okay but if weactually want to pull in an image over here and resize it how would thatbe working so let’s just pop in an image over hereand i want this to be one of my logos so i can just pull in this logo over hereupdate as you can see this is an image when wepop it to different devices it is lookingsometimes too big so we can work with the sizingas you remember we size and space um space out elementswhen doing basic responsiveness so when we want to actually sizethings we just select the element we go into the to the sizingand then here you use the width or the heightum in this i would i would use the height becauseyou can actually set the height relative tothe the page or how you actually want it and you can resize using this remmethods over here so now i am editing it for all devices as you can seeso this should be applied also on other screens so when i set it up to to oneheight in using this this sizing relative to the page it iskeeping it on all the all the devices but let’s say i want tohave it bigger on the on the desktop i want to have it a bitsmaller on a laptop six rem i want to have it also six rm let’s just put it six on thehorizontal tablet view i want to have it much smaller on theon the vertical tablet you and on the mobile iwant to have four as well so this is using the sizing options sospacing and sizing is the one we are using when we aremaking the the sites and pages mobile responsiveso now we have done that one and i just want to space it out a bit so spacing isdone using the the padding and the marginsbut when we are viewing mobile it is looking differentlywhen we are looking uh over here so let’s say that i want toactually modify the spacing on a vertical tablet viewand then the mobile so i will just click on thatthis one one more time so these two devices are chosenso i’m modifying it on this device but on mobile it will be changing as wellso i will click on the image applying some spacinglet’s just do margin and push everything downusing the the margin option 1.5 so now we don’t have the iconor the logo uh so close to the text over herelet’s just do two like that so now we have it a bit further awaybut these changes applied as well to the mobile responsiveness when wewere changing these two devices they were applied however on these ones theyshouldn’t have been applied let’s just have a look spacing okay so theywere applied for some reason however that is not an issueit’s just that when you select the responsiveness thethe the software doesn’t know that you didn’t want thatto be changed so let’s just move it back and then as you can see over hereit is still two but now here we change it backand then it is also popping back to zero on these threeso now we change it for this one it is two as you can see over herebut over here it is not showing up anymore as a 2.so even if you change something it pops back on a bigger device so let’s say youmodify something on a smaller device but it just changes backon on a bigger device don’t don’t be angry about that it’s just thatthe software thinks that you wanted this oneum so you need to just tell the software no thank you very much for helping meout but i actually want it this way so once you change it back once yourevert it will be uh applying the the changes that you did sothis is using the sizing you can also size usinguh using the width and the height however and this was a mistake i learnedvery recently previously i was suggesting people tosize using the pixels and pixels is givingyou a lot of different options so for example now i want toresize the width using pixels pixels when you resizeusing pixels it could give you a lot of trouble later onwhen you are working with with mobile responsivenessbecause pixels are not uh made to be mobile responsive pixels aredots on the screen and then they are actually one dot can be veryvery very tiny on a big device and then very very very big on a smalldevice so the pixels are not the best option touse when you are using uh when you are building out pages to beresponsive so this is why we need to use rem so pixelsare still an option however if you want to havecustom-made responsive websites use the either auto either relative tothe page or sorry relative to the parent these threeare the options i highly suggest you to use when you areworking and actually want to have your site looking fully mobile responsiveso this is leaving out the pixels another big thing is when you areactually resizing text with pixelsand this is done through here when you actually use these pixels to be resizedlet me just show you so you just set it upokay i want it a bit bigger okay still a bit bigger maybe 72 pixelsnow it looks good but now when i go to a smaller device it may not look good imay want to change this one but then you can actually not modify itusing this anymore you need to modify it here but then youas you changed it it changed also on the bigger deviceand this is happening because the pixels are nota responsive option this pixels editor is not connected toresponsiveness yet as you can see now i change to 56 pixelsit will be 56 pixels over here as well so this is when you are working on aresponsive websites don’t use these pixels over here justuse these dragging sizing options because thiswill get you the the options so that you can modify it asyou would like it uh basically the different sizeson each of the devices if you want here to be six remif you want here to be four rem if you want here to betwo rem this is possible using this featurebut using the pixels over here on the text editor it is not possible yet yes so that is what i wanted to mentionthere are different options when you are working withwith columns so let’s just try to to use something like a three column layoutwe can do images inside the the columns okay not this one but iactually want to put in image here like that and then i can choose an image let’s just use let’s just use joshuafrom yesterday so in my yesterday’s video i actuallycreated a full contact us page and i use thisimage to to build it outso i will use this image today as well so i want to just resize itusing the width and then relative to the parentthe parent now is you can see here is the imageand then the container is his parent because the image is inside thecontainer so now the image is being resizedaccording to his parent which is the container so the image isgetting bigger or smaller within this containerand this is what relative to the parent means if we increase ityou can see this is now 100 it is taking upthe parent container if we resize it the percentagesare over here are basically how what what’s the percent of fillhow the image filled out this percent of the container itselfso this is relative to the parent relative to the pageis good when you are working on bigger bigger things like containers and blocksthat are taking up a lot of space on the pagethen that is used there you can also use it herebut it will not give you as big as good optionsto to modify it uh certain modify certain elements as therelative to the parent so when you want to decide relative tothe parent or relative to the page you actually needto play with it and then think about when you use relative to the page itshould be probably something big uh so that the page is this sizeand then if you are increasing the image to berelative to the parent rel to be bigger thanyou use that one in case you are using uh something like this which is quitesmall then you want to use relative to the uhrelative to the parent which you can size according to the parent containerwhich is it is placed in so i want to usejoshua’s image at 60 and i will just use the same image againover here so click drag don’t succeed click drag succeed clickdrag succeed and then forget to to duplicate it soagain click drag and then mess it up and then you drag it down and you have itvery simple no i’m just joking guys so now this is ourcolumn which is a three column layout and i want to actually show how it lookslike on on smaller devices and you can seethat it doesn’t look very good because the the block is notcovering everything and then we can go into sizingand then it is set up to 100 visible heightbut we can change it to auto because i wanted to i wanted the block to be ahundred percent of visible height when it is when you load in the page sothis is when you load in the page most of the times this is what you seeso this is how it was set up but once you set it up on autoit will be taking also the lower parts thatthe lower elements that you filled in so it will uh it will give you more spaceand more background to work with so now it is looking good on each of thedevices because we have a lot of uh a lot of content more content thanwhat the visible height was previously on these tall devicesso now our background is set but i want to actually work with theseso as you can see over here my images are notaligned to the center if i click on the container and then i go to the layouti can i can align them to be spaced out in the center so now this one iscentered this one is not i can click again on the container click on the layout vertical centeragain it’s container layout vertical centernow it is centered on all my devices and as weif we check you can see that they are actuallycentered when you come to these vertical mobile and or actually vertical tabletand mobile view it will be stacking them on top of eachother so when you click on one of these images orthe container for example and you want to space it outfrom the top and bottom let’s say we want to space it out like thisit will be changing as well on the desktop so now as you can seemy previous two images are staying on the top over here but thisimage went a bit down and this is because ididn’t choose only one device when i was working with itso if i go back and then actually take offor actually i can do that here as well so if i click on this container which ispaced out put it back as it wasand then i only choose this device so i click on this one and clickon it one more time and then if i space it outlike that to rem these previous devices will be changing as well but once youput it back now it should be zero and only this oneshould have the styling applied you see and now thisone also need to be set upto be to rem so now we have spaced out the first onethe mobile device we have spaced out the vertical tablet viewwe didn’t space out you can see here zero zerothe horizontal tablet view we didn’t space out the laptop view and thedesktop view stayed as well on zero sothis is how you play with columns on a on a wide devices you will havethem displayed in one row if you are changing over to ahorizontal devices which are mobile and tabletthey will be stacked on top of each other so the columns are automaticallychanged um yeah so this isbasically how to play with the columns as wellwhen you want to resize columns this is a different story it is a bit harder towork with because when you go into the sizing ofthe columns it is a bit more tricky so you need toplay with it when you are actually resizing forexample i don’t want them to be so wide i want them to be a bit smallerso i’m resizing the layout 3×3 this will also be changing now on all of thedevices and you will probably need to do a bitmore tinkering for example here i wantbecause my column is much smaller now i want my image to be a bit biggerso then you can go in and then change the sizing of the imagesitself so you would need to play with it you need to play with the sizing and thespacing to have the site looking as you want it to bebut yes basically that are these are the basics of getting yoursites mobile responsive so now what we learned is that when youare editing the the desktopand you have all the the other icons chosen as pingyou’re editing for every device when you clickone more time on the device itself you are editing only one deviceif you want to change the device you click overbut then you will not be changing other devices you will be changing only thisdevice so you need to make sure if you add on some options like hover effectsor change different colors you can do that one on separate devicesfor example let me just change the color of the background on this onebut i don’t want them to be changed on other devices only on the horizontaluh tablet view i want to have a different colorbutton for example i wanted to just show you one thing that a lot of people weremaking mistakes from if you delete something so i just want to delete thelemon logo form from my mobile devicei click on it and i delete it and that’s itso now it is gone also from my other devices as welland this is happening because when you delete somethingit is actually getting rid of it from the code itself when youremove it is actually taking the image out from the codethe source code that you have access to this taking it out from thereand then just getting rid of it like so this is not something you want to doin case you want to just have something notappear on a mobile so i’ll put it back and then i will show you an advanced sothis is the advanced uh setting hiding elements on the pageum this is the only thing i will be showing you because i went into moredepth in a separate video that i did so i am editing only the mobile deviceas you can see i want to click on this image and i wantthis image to not appear on a mobile devicebut our on every other device it needs to appear okayso this is where i click the image layoutand i go to none now as you can see there is somered lines or red crossing lines checked linesover my image and the transparency is applied to this imageon this device but when i go to the other one it will still be showing upnone and this is this needs to be set back toblock and then here it will not be showing buthere and here and here and here it will be showing so this is againsoftware doesn’t know if you want to actually delete it or orhide it on every device or just this one so this iswhere you need to hide on one device and apply to show onthe other devices so let’s just save it and see how itlooks like when we are actually resizing the imageit is resizing the the screen it is still showing the image over hereand it is just a ghost of a real image that is showing on theon the other devices as you can see but on this one it shouldn’t showlet’s just test it out so this is now the desktop devicethis is now a tablet device sorry this is a laptop device this is a tabletdevice this is a vertical tablet and now we’regoing over to the mobile view and we don’t have thatuh that logo showing anymore because on this device onlywe hid it so it is not appearing anymore because we set it up to not appearbut when we scroll it a bit then it shows upand there is a more in-depth video on on this one if you go to youtubeand you type in hiding elements Groove adding elements on differentscreen sizes in GroovePages so this is a videoon the actual advanced uh responsiveness options and i wanted topoint it out in case you want to do something like that you canand here is the link i will share the link in youtube andalso inside the facebook chat in case you areinterested in doing something like that you canbut guys this is approximately it what i wanted to sayabout responsiveness i will not be going into the expertbecause this is basically hiding entire blocks and entiredesigns and then just creating completely newones uh for separate devices so i want this to show up on a desktopbut i want a completely new one i want here a buttoni want here uh some image over here i want this to appear on a laptop forexample so you can do a completely different styling andcompletely different websites on different devicesthis is possible i don’t suggest it but it is possibleso i didn’t want to mention anything about that just explain what it isthis is not something you will need to do in case you just didwhat i showed you today these basic and advancedresponsiveness customization you can actuallyget your site looking 100 as you want it to look like but yesthat is approximately it and now i would like you to guysto ask me what uh you were struggling within case you still have some question about response from that this is thetime to ask it i want to actually while we are here to show you what uhwhat you can do and how you can do it so let me justgo through the questions um it’s possible to integrate googlesheet directly without the third party no it is not possible at this point soyet there is zapier that is integrating itbut directly to proof it is not possible is there a limit howmany websites can we have when we are platinum memberno there is no limit and it is visible on a GrooveFunnels dot com forward slash upgrade once youcome over here you can find all the information neededand it is showing up here lifetime access you actually get uh allthese things so you get access to all these um all theseapps and in case you want to know more about the GroovePages itselfyou have here unlimited project size unlimited pages unlimited websitesunlimited funnels unlimited bandwidth andunder rest so GrooveFunnels.com forward slash upgradeis where you would learn a buyer about what you actually getas a platinum member um question from yanique will GrooveVideocome live today haven’t heard anything about ityes it is going to be coming out today um we had a new update on it and wewanted to push it out before we actually deploy and publish thesoftware itself this update suppose was supposed to comein the next couple of days but as we still can work on it it withoutbeing published we decided that we want to just push out thisupdate immediately it seems like the mobile responsivenessdoesn’t work all the time sometimes when i change the textor the sizing it changes on every device even if it isjust one on single device have you recognized similar bugsso this unique is not a bug this is what i was explaining when you are changingit with pixels when you actually modify this withpixels then you cannot modify it on each of the devices it isnot a bug it is just uh that pixels are not theresponsiveness when you set it up as a pixel over hereyou cannot modify it so what you would need to do is actuallypull in another element of for example heading somewherein here and then actually you can you can modifythat one now my heading is here so then you then you you need tore-apply you need to redo what you did uh toactually get the modifications for customization in responsiveness okayi believe there was a question from from eldon that i cannot find anymore here we go question what’s up with theimport feature import feature will be coming eric i didan update on that yesterday this is the last one i didn’t haveanything else all about does resizing also work onvideos yes it is the same thing as on theimages there is no distinction between sizing videos and imagesthey are the same thing you should size them not with pixels but with relativeto the parent and page and then it will be working fabulouslyeldon so the pop-up text editor is not working withuh font point sets it actually works with pixel setsum not quite sure let’s just test it out so when we are working witha device over here and then we work with point sets and you can actually do the same thingso when we want to apply to one desktop to b6 rem and on thelaptop to be 1.25 it is actually working the samething you can apply a modify on each of thedevices as you want it to be ldn so i’m not quite sure what issuesyou got stuck in probably with these pixelsbut resize your text using these sizing options and then you will not have anyissues okay perfect how do we import featurealready okay this is not a feature at this point yet it iscoming soon i’m back but still don’t see the upgradebut still see the upgrade button i contacted support but they confirmed myaccount this upgrade as a backer what feature should i havethat others do have basically just the templates at this point there is noother features in um in therebut the button itself is not a problem i still have the upgrade button as welleven though i have everything else activated so thisis not something that you need to follow but in caseyou paid for it you upgrade it and you actuallyum have received all the receipts and everythingum the confirmation just do this one so when you are using chromeuh as your browser right click inspect you come over here to reload you clickand hold and then you will see the empty cacheand hard reload as the third option you click on that one this will actuallyrefresh the the whole website start from scratchokay so now you did this inside the GrooveFunnels appyou can close it and then you log out okay you log out you log back in usingyour details and then you should not see anymore thisupgrade button in case you still see it it just maybe needs a bit of time toto upgrade and uh to not show up anymore but the only place where you willyou will be able to see if you have upgraded ouraccount or not is when you go into GroovePages and youdon’t have the option anymore which is sayingyou can only have three sites if you still see that then you need to tryagain doing a hard reload logging out logging back inthis should get it fixed uh so that you can do multiple pages thanthe only the three so that is it um i don’tsee any other questions uh except this one where can we find a video on hidingelements on different devices joel i pasted in the link in thefacebook comments over here you can just search for my comments inthe comment section or as well inside the youtube channel soyou can just go to the youtube channel and just type inhiding elements Groove or GroovePages or something like thisyou will find it but that’s it guys thank you very much for watching ireally in i really hope you learned somethingnew about making pages responsive um i hope youwill be able to edit your pages and sites so that theyare looking exactly as you want them to beand yes please go out there create your sites tomorrow is wednesday we are doingshow and tell wednesday so i would like you to applyyour sites over there so that we can go and give myso i can go and give my feedback on it so that you can improveand get bigger results than before so that’s it guys thank you very much forwatching and then see you in the group bye-bye
