🔴 No-Code Livestream

[ad_1] Hello everyone and uh welcome to today's no code live stream my name is adrian and i'm going to show you some of the stuff that i'm doing with noco these days as part of codex community which you can join in the discord below because i'll be reading the live feed Here and answering questions as well if you have anything you can also do it in the live chat on youtube and i'll be around here to say hello and do what i can otherwise if you haven't seen what i've been doing in the last video i've been converting this wordpress website over From well wordpress to editor x and while we're doing this live stream i'll continue this process so you can get a look at what live streaming for no code looks like hello francesco i see you're the very first person here uh i hope you're doing well today So uh there's about a 10 second delay on this live stream so it'll be about that long as i answer questions but in the meantime i'll just continue migrating this website and explaining what i'm doing in this process previously i did convert this home page Over here and today i wanted to have a look at some of the responsive design which didn't really come across that well so i'm gonna see if i can fix this up a little bit so for the responsive design we've got a few options here we've got the option For desktop we've got the one here for a tablet as well as the one here for a mobile phone and one of the things that happens here is that the docking system basically tries to adapt the sizing and going through the different responsive viewports now i've got francesco asking going well You pronounce my name perfectly and i just wanted to check if this was a real live stream or just a pre-recorded video yes it is a live stream it's uh not something i've done for a long time but uh maybe i'll get back into it i know That you do a lot of your videos i'm not sure do you do them live or do you do them pre-recorded and let's have a look here so what i'm gonna do i think here is have a look at the sizing so this collapses immediately with the mobile view Oh i'm not sharing my screen ah this is why i need good feedback so let's jump here into this screen that's much better um yeah so you can tell i haven't done live streaming for a while ah so we've got the desktop view here we've got the tablet view and we've got A lot of these elements overlapping so what i'm thinking is i might actually hide them and when i hide them over here let's see what options i have to hide them so we can probably have a look at maybe even repositioning them simply because like with the call number it's very Useful to keep that on the page especially for a home section so i could for example put the menu here at the top the hamburger menu here on the top right and this section here i could center the text and then repositioned it underneath i think that would look much Better yes that definitely looks much better and then with that we need to jump in and center this email address as well and this sort of snaps into place i almost want to expand this out all the way so i might make this a width of a hundred percent And the call section here for a hundred percent as well so that looks good and i might decrease the sizing here a little bit and this section here where it's snapped at the bottom uh what i'm thinking is let's stalk it here from the left and the right so we Don't have to worry about that make this a hundred percent width and center this properly there we go and then this one over here rather than not really being docked properly we'll dock it just below this if we resize it now let's have a look Uh it seems to work a little bit better of course for the mobile version it's almost not fitting in there we almost have to change the text so we'll do that in a second for the time being i want to just get all this header working for the tablet version Ah hello we've got another person in here uh how do i pronounce this su hail i think uh hello there uh so here i'm thinking let's move this down a little bit and move uh move the number just up a tiny bit so that it all fits together let's resize this section here I think that fits in well yes i'm quite happy with that um so if we expand this out we can see that it expands out well but as soon as we're getting into a smaller view here this text element is almost not fitting in properly so as part of that i'm gonna Just expand it out a little bit so that it has a little bit more room as we go to a smaller viewport we should be able to see that it's fitting in better it's just still collapsing a tiny bit too much here i'm gonna continue to Increase it so that as it snaps into place here that works in terms of the logo though i think it has to go a little bit over to the left here so that it has room for the text before it breaks ah great so you uh you saw that on twitter Did you ah that's great i assume uh you know francesco he is a quite a celebrity these days uh we've got timothy in here as well hello how are you uh if you guys have questions along the way just feel free to pop them in the chat i'll be following that along i've Also got the discord here so if you all have questions feel free to ask along beautiful uh so while i'm doing this let's continue on this responsive design so the other thing is this menu seems to be breaking so i'm going to expand it out a Lot more and i'm going to align it to the right hand side here so let's do that i think let's have a look how i'm going to do this i think it's somewhere over where is it layout there it is and then we'll move it to the right hand side I think that should do it right to left left to right right to left am i not selecting the right item here uh this live stream uh it's about looking at how you can do things like responsive design and develop websites using no code tools which is sort of What i'm using at work these days and it's giving you an idea of how they work and how you can get started yourself i think that like it's pretty important for developers to learn these things simply because this is sort of where half of the development is moving Towards these days especially with like a lot of the websites that i'm doing at my workplace being all no code so here how are the items aligned there we go the right hand side here and let's actually align them with the menu so now when we resize them And this docking is not being positioned properly so let me just position this on the right hand side i think i'll do it in this percentage yes this is in percent so i'll do this on the right hand side in percent as well and now we'll see that it should stay the same So that's much better 3 am over there wow you're definitely up late that's for sure thanks for joining and let's move this up a little bit so now we've got these elements here and the final thing that we're seeing here is still the email is getting um Sort of collapsing because the logo is too close to it so what i'm thinking is i'll move out the logo just a bit more so that way when we decrease it let's see what's happening let's increase this i think i i know what this is the width of this section here So as we get to there i just need to make this width a little bit more and move this logo a little bit out make sure that's all in percentages i prefer percentages they just seem to work a lot better especially for responsive design and there we go so now it's collapsing perfectly Now this is all the way up to tablet but as soon as we get to the mobile phone size we're gonna have to update this once more and what i'm thinking is i'll center this again i think that should be good but i almost might remove the email here And i don't want to remove it from all breakpoints i just want to hide it so let's have a look at what options i have here i could reduce the opacity maybe to zero percent or i could move it off the screen or maybe there is another Option here that i can do to essentially get it out of this section so let's have a look here and we've got so realistically what i want is i want an icon to replace this can you easily integrate the backhand services of editor x that is a good question timothy It's something that i'll be looking at in future videos uh part of that is like i want to have a look at how we can do things like collections and databases as well as pull in actual i don't know maybe react.js into the pages or pulling Out data from the pages because i think these are all questions and things that we do as a developer and i think that's like vital as part of no code so we'll be exploring all those topics as well hello there nut lop i'm not sure if i'm pronouncing that Properly but i hope i am how are you today let's see here so we've got this part working now over to the responsive design for this i think we might even have to make the logo a bit smaller for the mobile phone version and i'm just going to shrink down a tad Place it here in the center and place the mobile menu here at the top right or um yeah i think that should be okay but for this phone number and email maybe what i'll do is i'll decrease the font size so that this can still stay on the page Because one of the first things that people go on their phone for for a website is to literally contact the company so usually i prefer to keep those elements on the page if possible so here's a shrunk down version of them as option one the other is to add a new Element which is only visible on this breakpoint but let's actually have a look at the original website to see what this responsive menu looks like and if we collapse it down that does actually seem very similar to what i've created here so i think i'll leave that as is Simply because we are trying to replicate this design in no code and this is pretty much spot on so uh the only other thing i might do is make the phone section here just a little bit bigger so that it's about the same size as the email section and the previous design So here i've got the call to uh the hero image with the hero text headline and description but you'll notice that now this isn't fitting in properly so let's actually go first to the template version and what i'm thinking is that we'll make this section a bit Smaller and by doing so we should be able to also rearrange the text and to fit in better for this section so let's have a look at the original design which i think i accidentally removed and let's move it to a tablet design so this is what it looks like on Tablet on the original and uh trying to work and adrian's voice is soothing and i can use it as a bg or background music i suppose that's nice to hear thank you all right so what i'm going to have to do first and foremost is update this hero text Right now in the original design we can see it's much larger and it also almost sits perfectly center here and across the screen rather than just off to the left so i'm gonna expand out this section here so that we can do this and since we've got A bit more opacity on this section here i should be able to make the text larger and make this box larger without really causing the image to disappear so i'll increase the sizing here for this and what i'm thinking is maybe just so that it fits across the screen perfectly Which i think it does there and then let's actually increase this section here too and we'll increase this text as well uh let's do a scaled version and i'm pretty happy with that but it's just a little bit too big i'm just going to reduce it by a bit more and That's still not good enough for me i'm thinking what else can we do from 1 to 50. there we go so from 1 to 38 i suppose let's just make sure that we've got the same one happening here for the desktop so the desktop looks good and the Mobile sorry the tablet version here i still feel like it needs some more padding on this box so i'm gonna expand it out oh mark hello it's good to see you here i haven't heard or talked to you for a while now i hope you're going well Uh welcome to today's live stream my first of many i hope uh let's have a look here so what i want to do is add some more padding here from the top so i'm going to try and expand out this section a little bit now timothy says in the long run you Should integrate your streams with twitch to get more viewers ah yes hopefully there's some software that maybe can do that for me francesco will probably be able to give me some more information on how that's done properly so here this container isn't doing what I want it to do what i'm going to do is give it i'll remove the automatic max height on it and i think that should help me create a height that i want thinking maybe let's put in 150 pixels here no that's not working is this because of the docking possibly Let's do fixed and let's resize this and that seems to have done the right job and i'll also dock it from the left and the right and the bottom so now if we expand it out uh it looks uh what we're having here is we're getting the text resize automatically I think it's because i've selected this text scaling option so what i might do is i might remove that from both sides of the text and just define it manually myself it depends on the goal usually it's not a very good idea but it depends on your final goal i suppose you're talking About live streaming on multiple platforms right now i think i prefer youtube it was quite easy to set up but i'll have to test out twitch in the future as well let's actually expand this a little bit more So here we've got our desktop here we've got our tablet i think i'm happy with the tablet version but as we shrink down to the mobile version let's have a look oh that no that does not work look at how small that text is now i'm going to remove the automatic Resizing on that and i'm going to do the same over here i'm just gonna actually just make the text smaller myself maybe 20 pixels and or 24 pixels let's do that and over here i might do 18 pixels i think that should work much better and otherwise i think that section is All right let's actually expand this out a little bit and let's have a look at the original version here when we go to the mobile version and that's almost correct let's just see how much room we have on this image and i think this can be docked a little bit better But i think it's working okay let's expand it out a little bit just to make sure that it's expanding out properly i suppose and over here we're seeing that just on the desktop view over here it seems to be i suppose losing that gap that we have From the top and the bottom i think this is because of the docking so i'm gonna actually dock this from the bottom so that both of them have the same docking and then i'm gonna move this up just a little bit and we'll recreate that docking so now there's Always that small gap between those two so that's great for the heroes section i'm pretty happy with that the next thing i want to do is have a look at this section over here so right now this section is for almost like our h1 introduction but we can see that as we've expanded Out to a full desktop it sort of is losing its sizing here a little bit and this is because of the docking so i'd almost give it some extra spacing here and we could change for example its position from pixels to percent and have them both be docked from the Top this should work a lot better and it should retain their sizing as we get smaller and i believe it is however we're getting a little bit of an overlap on text here as we get to the tablet version so what i think we need to do is just Have a look at the size for this text so that it continues to work until we get to that tablet view let's continue on and i think there we go we've got our tablet view here we can create a different approach for this which should work So here is our tablet view for this i think i'm just going to give it some extra room but let's have a look at the original design and we can see here for the tablet version yes it does collapse the line but there is actual more spacing here given for this section so That's what i'm going to do i'm going to just drag down this section here we're going to move this text across and give it more room to breathe i think that should work quite well we'll make sure that the docking for both those sections are from the top and let's expand them out And i think here we've got a little bit too much spacing ah here we go all right so what's happened is it hasn't collapsed the line just yet even though we're on a tablet version so what i'm going to do is i'm going to actually shrink this down while it's on The tablet version so that it breaks the line for southwest immediately and then i'll move this section here below and dock it from the top so this should retain its sizing properly for the tablet version until we get to the mobile version let's see what we have here from the Comments uh watching at this reminds me that i have work to do on my personal site yes francesco that's something we always forget to do work on our personal portfolios and designs and sometimes it just takes a lot of work i've started moving all of my personal stuff to no code honestly because Doing this in a couple of minutes makes a lot more sense than me trying to bring it up in a next js format and playing around with the dependencies and updating node modules and before i know the whole day's gone and i haven't actually worked on it ah timothy says are you normally Choosing a font and a color palette in advance or are you working from a template so normally what i like to do is jump here to the style guide and you might have noticed that i've already configured the headings and the topography for the paragraphs to be Using the roputo slabs so this way it automatically updates as i select them for the colors i've defined the action color here or the primary color as well as the secondary and i'm just using these two without actual variations to their shades and their tints so i'm Pretty happy with that but normally you would want to go into this section beforehand and set this up because it just makes a lot easier it just basically is like setting up your classes essentially now uh over here we're doing quite well for the desktop we're doing quite well for the Tablet and then on the mobile it just breaks so what i'm thinking for the mobile is if we check the original design here we'll be able to see that it stays more or less the same font size but i'm thinking that it might look better if we reduce the font size so i'm Going to move it over to 28 pixels but i'm also going to give the mobile version a little bit more sizing i might even just set it to be full width if i can so that's um width 100 let's see what that looks like no that doesn't look great but i think Here just about this sizing the same as we have for our hero section looks and works quite well and then for this paragraph here i might expand that just out a little bit we could even make this section a bit smaller so that would fit in quite well Now what i'm thinking is we'll double check that our docking again exists on the top and the top just so that as we're resizing it it always has the same amount of size from the top and the bottom so that's working quite well uh we can Now move on to this section here which uh well it definitely hasn't collapsed very well but we'll fix that up in a second so this is this next section which is sort of like a introduction with some news as well as a video and we've got This image on the right hand side and all of this isn't resizing very well so what i want as the first thing is almost to have this grid collapse when we move down to the tablet version so that's quite simple to do we can just literally Select it here and it will collapse but we'll have to sort of move about how it works so the first thing i want to do here is make sure that our docking and the positioning is working at the percentage level so that some of these elements which seem to be moving About in different views for the width stay exactly the same so to do that i'm going to make everything a percent here and that should fix it usually that is the fix to doing that so now in the desktop version we should see this bar that we've put under the image stay More or less the same and we'll do the same here we'll change this to a percent and this here over to a percent as well now i think that's working let's have a look so the text for the title is working but we'll see that the text here underneath The title isn't and that is because it's not being docked so here i'll dock it back to that grid and we'll make sure that it's a percent as well and that should fix it up great so here that's that's working but we can see that when the text overlaps We're losing some of that spacing so i'm just going to move it down a tad and that should be okay it will need to go and be docked from the top as well it's lost that docking so let me just do that now and let's do the percentage as well All right so that's working now in terms of resizing just need to make sure that it's in the right position so i'm gonna do that now and there we go i'm still not quite happy with this it might need to be grouped so let me select both elements ctrl g to group them And let's see if that will fix the resizing so it sort of fixed the resizing a little bit but i'm still not happy with it so let's see if there's another way we can fix up the sizing for this by maybe putting it into its own block or container And let's see here we've got container options i'm going to move it into this container which will have a white background or even a transparent one so let's set the opacity to zero place this in here and this below it and resize it down just to be the Same size as this image here and then expand this out and expand this out as well let's move it up a bit and place this container right over here and then make sure that this container itself is docked the same as our image so if you have a look our image is being Docked from the top and the left so this container here i'll dock it from the top and the left will resize it and while our image is a percentage dock we'll need to do the same here for the container too great so that seems to be working better The main thing here that i want to do is just make sure that these elements here are essentially working the same and they've got room to collapse properly because i'm getting a bit of overflow here for the text i'm just having a look how i can do that Properly without having too much padding on the text so here that's fine i suppose what we could do is we could apply a grid and that should solve the problem so let's do a two by one grid let's place this here let's resize it that should be about the right size and I think that should work so let's move this down we can see that that's working much better now okay i'll move this at the very top of the grid let's expand this out yep that's definitely working quite well now on the left hand side here now that We've learned we can do this container with a grid to resize our elements we can pretty much do the same thing on the left hand side so let's actually put in a container here we'll apply a grid and do a three layer structure and i'm just going to move this down to Be about the same size and then i'll move in this element over here this element over here and this element over here and let's move our grid back and now what we want to do i wonder if i can change how this grid sizing works There we go so i want to move this element up so it's just the same size as our title move this element down for our paragraph and the last section here should be okay so what i'm going to do is maybe just expand it out a little bit this will be Where the video is let's move the video in here and i think that works quite well let's make sure we remove the background for this container i'll just open up the inspector here and let's set this to zero percent great and then i'll resize this so we're seeing that the Resizing is working in terms of its positioning we are getting a little bit of overlap uh i'm just thinking where does that start that starts just before the desktop section and i suppose what we can do is we can expand out this to utilize the full part of this grid and Here we want to do the same we want to make sure that it's using the full size that we can and then let's dock this to the top and the bottom move this up a little bit i'm quite happy with that and this one here should stay the same so here Let's have a look so now that we're actually moving it all the way to the left and the right we do have a bit more space for it i'm thinking maybe if i just resize this container here that should fit in and then i can move this up a little bit And let's try it out now let's resize this down and up so there that seems to have fit in quite well the only other thing i want to do now is maybe move this video up a little bit but before we do let's change out the Grid structure here now that we've got a slightly different design uh we've got when deal wendell hi guys hopefully i didn't miss much uh yes i'm just doing this live stream here showcasing some of this no code stuff i've had a few questions but if you have Any feel free to add them in the chat and see if there's anything on discord not at this stage uh so here i'm going to change this grid layout in advanced mode i'm just going to move this a little bit up to fit in with that video So i think that's good and that should be about the right size and let's resize this that's great i'm gonna see if i can make this video a little bit larger uh i'd like to have it use the full width i think that should be good because it's gonna resize anyway And that seemingly has done the job quite well now with this done i'm going to move these two elements over a little bit here to the left and that's perfect but let me just see how these are resizing all right so when i move them over to The left i think i lost some of the docking that was happening so let's double check that uh we'll jump into inspector we'll dock this from the left and the top and this one from the left and the top and let's resize that and that's working then we've got this one over here On the right hand side resizing properly and then tablet mode so we can now safely say that the desktop sizing is happening according to how we want it to work but for the tablet version now we do have to rework that and we might have a Look at how we can use the grids to do that so the very first thing we want to do is get this section here that we have for the i suppose the first section for the grid out and then the second section for the grid here we go all right Let me just have a quick look so if i move this over to the right hand side we've got our first container with our image and our second container off to the right i'm going to move both of them below so they exist on the second part of the Grid and these will exist on the first part of the grid then i think i have to resize the grid a little bit so let's change this grid layout go to advanced mode and i'm gonna just make it bigger maybe let's see if i can resize it over here first So that's a bit bigger then i'll move this over to the right expand it out and this one here i want to move it below but we need even more room for it so i think that's enough room just over there about this size uh we can have this piece of text here Over and fill out the width completely and i'm thinking we could even reduce it a little bit and let's see if i can shrink this screw down a bit text still is in the right position let's move in the image to be the very first thing so let's move this container Down and we'll move the image up to the top left i might expand out this image and i'll continue to expand out this main container we'll have to change the grid layout a little bit now so let's jump back into advanced mode shrink this set down a Little bit here but expand it out a little bit there and move this container in here we'll expand it out to be the same size as our image but i'm also going to expand this out to be the full width as well let's do the same for the text on the left here Great so i think that works and the only other thing i can see here is that maybe we can shrink down or move this section here up a little bit i suppose there we go and then this one can move up to the very top of this grid okay so i'm Happy with that let's have a look at our original design and then we've got here we've got it like that we've got the video here which seems to have come across quite well we've got our image what we're missing here is the button so i'm going to add that back in i think I don't have that anywhere on the design so let's actually create a new button here and i'm going to place it just underneath i'm going to make sure that the docking is the same as our other sections so let's do that in percentage i'll remove the dot from the bottom i Also want to change the color here we'll use the primary red color i think that's the same that we have in our design but i also wanted to have an outline design so maybe we'll just do a border that's red and the background opacity to be nothing i suppose let's have a look So let's do a 2 pixel border background opacity nothing and text can change color to primary color and let's see the text we have and it's called product features and benefits so let's actually paste that text in here product features and benefits beautiful now that we've got that text In there we'll just expand it out i'm thinking maybe use the full width of this section uh yes francesco it's much easier to design in here that's for sure and especially make changes too so we've got this button here let's resize it now and we can see that the Docking has gone to the bottom so i want to dock that to the top so let's do that and then resize and then we want to do the docking as a percentage so let's do instead of pixels a percent and then that seems to have worked better But uh i think that it still needs to sit maybe we need to create almost a grid structure for this like a third one let's see if we can add that in add a row and then i'll put the button inside of this grid so we've got this grid here let's expand This a little bit and we'll put this button in here we'll shrink it down to the grid structure and then let's resize and that seems to have fit in better and we can just make sure that it's at the very top of our grid there and let's expand this out a little bit To the left and the right we might even want to dock it similar to the text so the text text is stocked from the left and the right so i'll do the same over here and now if we resize it we can see that it's sitting just underneath the text It's almost not fitting in so what i might do is instead of saying product benefits and features i might just call it features and benefits oops that's not what i wanted to do there we go and then let's resize it and then that seems to work quite well Let's have a look at what this looks like now on the tablet version so we've got our button here but it's moved or changed this grid structure so we're going to move this grid structure down a little bit for tablet and then i should be able to just fit This button in on the third grid if ah there isn't one here so we'll add that in let's add in one more row done and then move this button here for that last row i'll expand it out to be the full size and let's do that over here uh where is the inspector Let's center this beautiful expand it out great and then this text element for this grid i think the grid in general or this container has to just move down here below the image we're also going to have to increase the size of this so let's actually move this back up there we go Uh so that's what i wanted to do i think if we expand this and shrink that down we can see that that is happening quite well but the docking on this container here isn't from the top left so i always like to have it from the top As a standard i find that works a lot better for me and then let's move this below stock it from the top and when we resize we'll see that it almost sits the same the only other thing here is that we need to make sure that when it's stocked from The top it is a percent there we go so that's uh responding nicely now so we've got our tablet version working for this main content now we just need the mobile version now the benefit of doing these grids is that for the mobile version it looks more or less like it's Already worked really i'm just going to move about some of these elements a little bit to make room for well the padding just so that it has some good padding but otherwise i'm pretty happy with what we've got here and i don't think it needs too much changes it's just this one container Here which doesn't seem to have expanded out properly that i need to fix up so let's have a look at what's happened here i suppose we'll start off with the desktop version and what i want to do here is make sure that the width has a minimum width minimum height And this is a container i suppose we want this container to realistically just expand out to the uh the footer so we can select this one here stretch which should do that but we're still getting some overflow here so i'm just wondering why we're getting that overflow And if we have a look we can't change the width there's also no manual width on it so it could be the content itself pushing it across so let's have a look we'll undo this i think it could be this one over here that's causing it Yes because it's a manual width so i'll change this to a hundred percent width percentage and i'll change this to also be a hundred percent width percentage and i think that should be it and then here it just needs to snap into place i could manually do this by setting all The margins here to zero and just docking it and i think that accomplishes the same goal so it seems to have done that however this text element here is expanded way too far what i'm thinking is just do a pixel percent here or maybe 500 pixels for this copyright section maybe expand it Out just a tad and dock it from the left and the right hand side as well as maybe from the top and the bottom and i think that fixes this element quite well so now if we resize it we can see that it's resizing and this one over here i'll want to dock That as a percent and this one here as a percent two and we might want to apply that grid structure here for this with a container as well so i'll grab this container that sorry this grid that i'll create i'll place these two elements inside and place that here in the footer section Then i'll resize this over here and i'll also customize this grid what i'm thinking is maybe expand it a little bit here and shrink it down for the button that works quite well and then i'll place this button here below and then finally for this section here I'll remove the background and i think that should do what i wanted to do when i resize it so yeah that seemingly has done it and then for the tablet version let's uh let's have a look first of all this should be underneath that image that we had previously this line So i'm going to move this line back underneath here and i'll make sure that this line is working as a percentage that's docked assuming i can sort of click on it so here it's fine and then here it's gone a little bit wonky so i'm gonna move it just below this Image i'll select all the percentages here to be percentages and there it's sort of fitting in under the image which is perfect now for this text here i'm going to make it smaller now let's make it 24 pixels i think the button is fine and that way as we Decrease the responsive viewport here if we have a look at the original design it's more or less the same and we also have this copyright section which can also decrease in font size so i'll change that to 14 and i'll also center that a little bit better we have some better docking too So let's continue to shrink ah so here we've got a bit of an issue and i is this on the tablet viewport no let's continue to shrink down continue to shrink down here we go so as soon as we get into the mobile viewport here we can see that this Grid structure isn't working quite well so what i want to do is i want to have a look if we can um make it a hundred percent for the width remove any margins which we've already done and then what we can do is we can shrink Down this text a little bit more maybe 18 pixels great and i'm gonna move this container that we had before and i'm not gonna expand it all the way out this will make a lot more sense now that when we resize it it'll always expand out to the full width And then i'm just going to move this text in just a bit more and we could make even this grid a bit smaller so let's go into the advanced view shrink this down a bit and let's shrink this container down a little bit too so uh let's see here I think it's just utilizing the footer size but let's shrink it down anyway and i think we'll just move the button a bit more down this text a bit more down and that seemingly seems to have done its job i'll keep resizing it and this text needs to get smaller too So let's check the inspector here for this text size and we'll change this to 14 pixels and i wonder if i can change the text here to just say uh free quote today if i change that will it affect the tablet design yes it will so i want to undo that So let's undo that as part of these changes it looks like some of the desktop changes have been reverted so i'm going to make sure that those stay the same and what we can do here is we can set this back out to be full width i wonder if we expand this out Ah yeah so i think i'll just keep it forward there make sure that it's all the way across let's do a fixed amount of 100 with zero margins so that's correct then over here that's correct and for the mobile that's correct the only issue is this button so i might actually just Resize this button like this and that seems to have worked so we've got our footer now done as well with responsive design let's just fix up this copyright section to be expanded and let's move it here into the center and that's it so let's double check our original design And there is a bit more i suppose sizing for the mobile version for this but i don't think that looks good especially for a mobile it's almost going to use up a whole screen or more whereas this is a little bit more succinct we could always expand this out A little bit more now let's see if we can make this footer a bit larger and expand out this container to be a little bit bigger as well we go expand to the top move this down a tiny bit and move this down a tiny bit too But more or less i think that works either way and you don't want to have too large of a footer and this footer seems to have done its job accurately great uh and the other optimizations we can do here is just a little bit on these containers so that they're using The full width that has been provided for them and there's a few ways we can do this the first thing i might do is change the overall container with to just expand out here and use that space and that way it sort of is doing that Quite well and this one was a separate container so what we can do here is we could first of all update the grid here in advanced mode shrink this down to here and shrink i suppose this section at the bottom down a little bit as well there we go And then here we can move this text element and this image over to be about the same size as we have everything else let me expand that out we'll have to do the same here on this container which i'll do in a second but we definitely need to continue to Update this grid so that it fits in properly so let's move back to this image move this up here this line can go below the image and this container can go below the image as well great let's move this line here in beautiful and this features button can go below it so that Seems to have come across let's double check the tablet and the desktop all of those are working and the only other thing is the docking that i always like to double check to make sure that the docking is happening from the top here it is for this one it's happening from the Bottom so i'll move it to the top these ones should be fine which they are great so let's resize this a little bit let's make sure this is a percent beautiful okay i think we've got the responsive design elements for this home page now done and this should hopefully give you an Idea of how you can move about change different elements and customize them in different viewports and it was also a good live stream to do as the very first live stream hopefully we can get some more people in here in future live streams and we can Do some more things but uh i'm really happy to have done this live stream i hope you guys enjoyed it and if you want more content like this just make sure you guys hit like subscribe and i'll see you in the next one thank you [ad_2] #NoCode #Livestream For More Interesting Article Visit : https://mycyberbase.com/ https://mycyberbase.com/technology/%f0%9f%94%b4-no-code-livestream/?feed_id=17785&_unique_id=648ef5661eba1 #Technology