Building a Design Layout Challenge in Oxygen (Responsive).

hello everyone and welcome to another exciting tutorial it's been a while and i've been busy with some projects so i was on youtube and i saw this challenge by um design course you know challenging kevin powell uh the css master to code this layout and i thought okay what would it be like if we did this in oxygen so um he has a link here you know to the psd file so i downloaded the psd file and uh when i had to export this asset so i'm going to show you and the process um of building you know from exporting this asset to optimizing the image and building the site i'm trying i'm gonna try to be as fast as possible and that's just because um and that's just because um i've actually done this you know and uh i've tried it out and then i i want to be as fast the reason i tried it out first is because i know that this is the kind of layer that is going to take a while to do especially if you want to take responsive uh mode into consideration so um you want to build it in such a way that when you want to you know switch it to responsive you won't have issues especially with the typography um and we have a lot of um absolutely position elements you know here like you know from when you look at this layer you're gonna know that you're definitely gonna have some absolutely positioned elements now the first thing is you have to look at the layout and plan out what are you going to do you just don't jump in and start building you have to look at this layout now so what i'm seeing here is a section that is full with okay and then um i'm seeing a div here okay so that's a div and uh let me just i'm using some photoshop select tool to do that okay so i have a div here okay and then i have two divs inside so you have here and here okay and then inside here now because these three columns don't don't span to the end i would want to use paddings to control them because they might be difficult so i think it would be good to place another div inside okay and then set it to maybe a width of say 80 percent okay and then inside inside that then we place the three columns all right and then each of this column you know it's going to have an image on top and another div where you're going to place these text elements okay and because you you want to be able to to give these paddings without affecting the image all right and uh we're going to work heavily with class classes because uh it's going to make our work easier especially when you go down to responsible and of course because it's a best practice all right so now how i you know took this image from photoshop is like if you if you're not familiar with photoshop and you open it for the first time um you could just simply right click and then you you know whatever you right click on you know it's going to show the list of everything that is start under where you're right clicking so here is just the background and the band's graphics so if i select the band's graphics now nothing seems to be selected um show transformation control is selected so i'm gonna just go view show extras okay so it's gonna show anything that is selected okay so i can see this is selected um and with that selected i can go to the layers panel and then hit alternate and click on that layer and that is going to hide every other layer except that one so i'm going to go to image trim and click ok so that is going to trim this image to you know its size i mean the the whole um ad bots or the size of the image and then now we're going to export this image now i'm not going to do that for all of them this is just for you to see and if this image did not have a transparent background we would export it as jpeg so we go to file export save for web legacy okay and then now if it were to be an image without a transparent pixel we would use jpeg and then we'll make an adjustment but we see if we use jp we're going to give it a white background so we're going to use png 24 okay and then for the size we're just going to leave it like that um uh but you know i'm looking at that photoshop file you can see that this doesn't span all the width of the screen and most of the time our screen is just almost about this size so let's make it about half let's say 600 for optimization let's just make it 600 pixel you know so that we can be working with optimized image size so now um so i can just save that and i've already exported and save all these things okay so that is how i exported them i'm gonna undo that twice okay so i exported these let me go to auto select so i can just select what i want all right um how to select check select this i want to select this yeah so i exported that so i can use it for you know that shiny stuff i exported this so this is definitely you know an image of the glare and i also exported the background now the background is made up of two so you have the background you have this okay i've already worked on this so if i undo take it all the way to where i started you could see that um the background yeah you smell of the bg and the background like these two layers so these bg's what have this texture okay and then this is what have the color so i'm just gonna click both of them and press ctrl e to merge the two of them and then i'm gonna hold alternate eye then export it as jpeg now if you're exporting a background like this uh you know i'm using a shortcut to do that now you're going to make a jpeg okay and then um the size now if you're going to be planning to if you're using a kind of background that you're going to be planning to use fixed and fixed background where the you scroll past the background the background will not be scrolled okay so you could leave it at this kind of dimension because you need something really big like that to have a fixed um a fixed background because it's going to zoom it in and you don't want the quality to drop but if you're using as a normal background non-fixed it's just going to scroll with the page you could just make it the page with and maybe or slightly bigger so like something like 1600 pixel and then you could export it all right so um so that's basically it so uh so i exported the things that i need to export these these these um these image and this one okay this image i don't know why it's that big you know but okay i guess it's because of uh how they brought it in now while i was exposing this image i found out that it wasn't the same size the same height as these two so i had to bring it back to photoshop and just make it the same height as these two because um just for consistency all right so let's go back to all right so i have oxygen here open and initially i was thinking of using this oxygen with the atoms that i used but i decided okay since um people if you if you've seen my screenshot in um on facebook you see that the interface is a bit different because i used other atoms like swiss knife and hydrogen but um i figure maybe a couple of those who are going to be watching this i'm not going to use those um plugins so i just want to make it work with a familiar interface so another thing is if you work with um you know now if you go to a website called tinypng you know to optimize your image you just go pick up all your you know everything that you downloaded okay and uh just take it to that website just drop it here and then it's going to upload them and then start compressing them now for some of these i've already compressed some of them so you can see the compression rate is very low but um well so so yeah so you see the size before 13 to 5.9 39 to 38 150 one two so it compresses this and you can download all of them um so the first thing i'm going to do is to add um this other section so i'm just going to add a section and then from a phd you can see that that section is 100 viewport width so i'm going to make it a hundred percent viewport sorry viewport height and then i'm just going to quickly drop the background okay all right so that image okay so the next thing i'm gonna do is to add a div in that section and then um of course i want to make it um i'm gonna centralize it okay so just put it at the center okay all right so um i just want to put it there at the center okay and then i'm gonna make it um a hundred percent width okay all right so uh we find that you know it's not getting to the very end you know of our section so to solve that i'm gonna select the section and then go to size and spacing and change it to full width okay and it's still not getting there but the section has a default padding of 20 i'm going to change that to so inside this section i'm going to add two divs so i'm just going to go add a div and just duplicate that and stack them horizontally and one of the divs i want to make it uh for the five percent and the next one is going to be 55 percent so if you can see here this side is a bit smaller than this side okay and uh so that's what i'm doing here okay um the next thing i'm going to do is just to start bringing in this stuff so i'm going to start with the image then text and this heading the button and all that so uh first of all i'm going to drop an image element okay um and then i'm going to select that glare drop it there so that's the glare and uh i'm gonna add the text okay so i'm just gonna make it a heading okay so um probably no let's let let me make it a texture let me undo that and just add a text and then i add a heading okay now i'm gonna select now to uh i think before um before going ahead i think i will have to start naming this stuff because as we go along it's gonna get really a bit complicated and then it's gonna be difficult to to you know so i'm gonna name give these classes and then name name this that's going to be painstaking but it's going to be watford in the end so i'm just going to call this um just going to call this main container all right and then oh yeah that's the main container and then there are two divs here so this one is gonna be design div left okay ddl and then this is going to be designed right so i just want to use the you know this what design so to name them and then um we've already given this attribute so i'm just going to copy from this from that and then delete so and the same with this i'm going to copy to that class that's from the id to the class and then delete the you know i'm going to delete that style from the id so those styles will remain with the class okay um so for these i'm going to just say the typography of the div and by the way let's let's name this so i'm going to rename this as main container and i'm going to rename this as ddl ddl so and this as ddr okay okay so um so for these i want to set the typography of the parent element to text white okay and i want to quickly do something i want my display font okay my heading font to be popping so i'm just going to go to setting global styles and my heading my font so the display font that is the heading font i want it to be poppings so that i won't have to change all of them all the time and for my text font i want it to be robo2 okay all right okay so that does it now you could go ahead and set up a lot of uh stuff here but i just don't want to i want to focus on this build all right so um the next thing is to add a button so i'm just going to add a button there okay now i mentioned that okay for these we we're gonna need to have another dp so we can center them together okay in the middle of uh that so i'm just gonna um from the text okay i'm gonna now we have this problem with this thing moving so this is the reason i usually use add-ons okay so if i use swiss knife i won't have this issue you know i'm not gonna have this issue at all where because of the drop downs okay so we're just gonna manage it like that okay all right so um for these yeah so i'm gonna wrap this text with a d let me just drop it deep um right there and then start moving this stuff inside the div so i'm going to move the text inside the div all right so this text goes inside the div all right so expand that move this heading so it's not moving all right just move it in the div so it's sometimes better if you move it you know above the one that you have um i'm using oxygen 3.8 beta 1 so i just want to you know play with that okay so they are inside the d and this div i want this div to be just something like this with about um so that should be about you could experiment with it but a you know maximum width let's say 350 pixel okay and then um these i'm going to set this to um i'm going to set the parent div i'm going to set that to to the center okay all right and this button yeah for this one i'm gonna set everything to the left okay all right so we have um so i'm gonna just copy this text what's that i'm going to copy this text and paste it here okay and then for these i'm gonna do the same let me show this again so i'm gonna copy that and paste there okay and for the button what is the vmr okay so what i want to do is um i'm going to just make this smaller okay now because we're going to be working with complex layout and into responsive mode i want to take the time to set up the typography using clamp now normally we would have said that um you know in the settings you know in the global settings but for the sake of this story i'm just gonna use my unit okay clamp unit so what i want to do is i'm gonna use the ram okay so if i make this one ram now that one lame is equal to the root you know um font size so if i go to global setting and you go to font i'm sorry you go to body text that body text is 16 okay now if that means one ram is equals to 16 if two rams cross to 32 okay now if i take if this weight would be like say 14 2 ram would you know be okay no that's not correct um the ram actually has to do with the roots so this is this is a body text okay so that means we are working with m okay but um some people could argue that you have to use ram which actually is a better idea and you could just do a bit of a research you know on that and you'll find out you check out the videos by digital ambition you know on youtube is a member of the oxygen community he has some very cool tutorial on that um so okay all right so i'm gonna use um i'm gonna use the ram actually i'm still gonna use the rim okay because the rim is still 16 it's just that we are able to change this right now and we have to use the style sheet to change the html font size but this is the body font size okay all right so i'm going to use ram but what i want to see is what size do i want my text this to be okay um this one okay um i still have 0.8 0.6 okay so you see um so 0.6 is kind of giving me what i want but will it give me what i want if i just give it that one spacing list okay all right so it's cool so now i know that point six is okay for me um i'm just gonna use that and uh i'm going to copy that i'm going to take another 0.6 and then i'm going to go here to this web semantics um rem clamp calculator and then make sure that these two are chosen and then i'm just going to go from 0.6 to now that is my sorry this is my maximum value from 0.6 to let's say 0.4 because i suppose that if i come to this breakpoint i would want these to be let's say 0.4 okay that's too small at least 0.5 okay so so let me remove that okay and i'm going to remove this also so um so i'm going to give it from 0.5 to 0.6 okay so that's what i want that text to be and then i have this you know calculated out so i'm going to copy that you know just from there to there i'm going to copy that and then come back here so let me just close all this other ones and come back here and then i'm going to set the unit to none and then i'm going to paste that okay so we see that if we it automatically calculates between the different um let me clean this up so it automatically calculates between the different break points okay so the font size so you don't need to adjust the font every time you move you don't need to adjust the font size every time you move so it just automatically calculates it [Music] so we're going to do the same to this heading okay so i'm gonna go to um ram unit and then i just want to move this to see okay so that is about it so five ram now i'll have to just change the line height to something like 0.8 so that you would closing this much okay now if i go to now we see that the biggest size we want is 5 ram now if we go to the smallest size what unit of ram do we need let's say 2 2 is not 3. so um if this and i'm this is not gonna start horizontally here so i bet if this way to stack so i think four ram would be good okay for this side so i'm just gonna go from five to four amps here so um the maximum okay so the minimum is 4 5 okay so 4 5 and then i'm going to come down here and copy that calculation of course let me remove that from there um just remove that from there and then here i'm gonna set it to none and then i'm gonna paste that so you see if we move from here to here we don't have any issues okay so um for the button uh we're just gonna quickly you know add a gradient so um for this bottom color i'm gonna make this base color like that okay but let's go and drop a gradient on the bottom background gradient so i'm going to add two colors to it okay and i'm going to select this color so in photoshop if you hit the letter i you're going to bring out the eyedropper tool so i'm just going to click on this and then copy that color okay and uh just put it here and then i'm gonna do the same here just copy that color um and then put it here okay now i'm gonna change the angle to 45 degree now nothing is showing so i'm gonna go back to the primary and just delete yeah what's going on there okay so yeah all right so it's showing now okay so it's showing and uh the button the button that they have here is um expands from all the way here to here okay so almost to the end of the v all right so and that is to give it a padding but before we do that i'm just going to go to typography and set it to uppercase and then i'm going to choose the display font as the font family and the font weight as 500 or 600 and then no later spacing and i'm going to go to the size and spacing and i'm going to give it a padding okay so the so i'm just going to give it a padding and the ram unit so so let's try three ram okay and three here all right so that's about correct but if we did like say two points four here and two sorry two point four here okay so that is more accurate right so and then the the button has um the button so we might need to make some more adjustment but let's go ahead and let's continue the button has a rounded um more rounded so i'm gonna go to the borders so the butter is more round okay set the border to none okay all right okay so um we're just gonna give it a spacing so for this top for this text i'm just going to give it maybe a bottom margin okay so i'm going to set the margin to i'm just going to work with ram in everything sorry padding oh yeah the margin to say one okay is that right so let's go yeah that's about right and then for this i'm gonna set it to two okay so that looks that looks fine okay that looks fine i think even though it's small like it's a bit more than the two like two point two point two okay let's just let's just make it two point five all right okay and this uh i think we need this to fill in the minimum width of that so i'm going to go back here and then remove that clamp and then i want to see what units because i thought 5 was okay all right so i'm just going to try 6. 5.5 okay so it seems 5.5 does let's see um now the problem i'm having is that this keeps breaking and okay so let's go back to the heading why does it break when it does not come to yeah so i guess that's that's the problem i had okay so it shouldn't because of the way i copied it so and uh the div that houses them let's go back i don't want that div to um i don't want that to be bigger than okay we've set a maximum width so yeah so let's go back to that heading and then hit six okay now if i hit seven you see it's going out of the div so so we show that as long as it is not out of the div it's okay so we have six so instead of using um four to five we're going to use four to six okay so that works better okay so i'm just going to copy this honestly it might seem like this a waste of time but trust me when you get to responsible dating oh my god if you don't do this you're going to waste so much time okay so um so that calculation leaves us okay okay that looks that looks good all right so the next thing i'm gonna we will keep adjusting if anything goes if anything is not right now for this image we want this image to be absolutely positioned here okay on top so i'm going to set this to position relative the parent okay and then the image i'm gonna set it to position absolute and then set the top to zero okay and then i'm gonna give this a padding to bring that down so padding top so just give it three ram of four okay so that's about right and uh then it's time to bring in these um it's time to bring in this other image this one so i'm going to add an image to that div okay and then i'm just going to go ahead and select this okay taking time to display i wonder why okay while it is doing its thing for some reason honestly i don't understand just to have a clearer view of what is you know happening here i'm just going to give this the background this background color so i'm just going to select that background color okay yeah yeah that is it and then i'm gonna copy it and uh and just drop it here but you have to include the hash for it to work now i need this to stretch all the way down okay so i'm gonna select the the parent okay okay so this dd okay so the parent is the main and uh of course so this was up i didn't delete this um let me delete the style from the id okay and then on the class i'm setting it to stack horizontally and i want it to stretch you know so so that gives us a perspective of what is happening and uh the main container is supposed to be a hundred percent um did we do something with that i think when we we moved stuff to to the class we did not set that width again so let's set that with okay so now it's 100 so if i hide this you can see it stretches from end to end um but what you're seeing here is that this shoots down so if you take the ruler all the way here you can see that this you know shifts all the way down so that means it has to be positioned um it has to be positioned absolutely so i'm just since the parent is already relative i'm going to go ahead and position it absolutely and uh yeah that collapses and i want to bring it down so um to bring it down i want to use um viewport max because i found that um let's use pixel first so if i make this zero okay or negative let's say negative 50. okay so that brings it more than i want negative 20. okay so that brings it down okay but let's see now if you go to other points let's see what will happen so it's okay it's kind of but it see it jumps it jumps out i guess at this break point it really doesn't matter but you know jumps um so so even though yeah it jumps out of this but you know if we use um viewport max okay let's say we use let's say like seven v max of course it's gonna be on the negative okay so i'm just gonna hit negative all right make it five all right so if we use five viewport mark uh max that's a unit so it's going to calculate what that means is going to calculate um you know based on the the maximum screen orientation so if the width of the screen you know is the maximum it's going to calculate five percent of the the width if the height like you know using it on a mobile device if the height is the maximum um screen size attributes okay it's going to use the height to calculate five percent of the height so that's what it means so if i move this it's still about the same as using pixel but um generally usually more reliable in calculating and one thing i've noticed is that the button you know does not scale it's not responsive so um i'm going to just go here to this eye icon and hide this for now i wanna walk on the bottom so what we did with the button was like we used ram okay for the bottom so and we use 2.4 now 2.4 ram if we go all the way down here um we want that size to come down a little bit say two or one point one point five two okay one point two and then the text size we want it to come all the way down um what was it it was um we didn't even give it a size so um let's let's give it a size and see what size this is in ram this is 16 okay that's one ram um but if we go all the way here we can give it 0.5 ram okay so that's not good all right so that is like point eight so we have a maximum of one and a minimum of point eight okay so let's just delete that and uh come all the way here and then we have from point a to one let's just make it one point two so point eight to one point two okay for the bottom so that um it will be fluid okay so i'm just going to set this to learn and paste that there for the bottom and see if we go down so the the it's reducing in size okay um and how about the padding so the same thing with the padding okay so we have 2.4 if we go all the way down uh i think that 2.4 is still good i think the problem was with the the text size but yeah i think the problem was with the the size of the text so we've sorted that out okay size of the text has come down if we need the button to go down we could always add that clamp unit to it so yeah so this actually this text is supposed to be a bit longer than this okay so we had our maximum value so we're going to change that maximum value to seven let's see how it is okay so it's not really changing anything so we need this to be bigger okay um so yeah so we're going to change it from from 0.5 you know to 0.7 so what we're using was 0.5 to 0.6 so 0.6 and let's see how it is what did i do okay fine that should be point okay what did i do 0.5 to 0.7 okay okay so um it's still not giving me what i want okay so i'm just going to edit it from here so i'm going to give it 0.8 here and then of course you know it's kind of you really can't edit it from there you know so to be fine except you really know what you're doing i don't know the clamp calculation so i'm just going to stick with with these okay clamp okay so 0.8 just works for me okay so i guess i'm going to go with that so that is you know you play with that and once you get your value you just forget about everything and everything will fall in place as you go down everything will just you know fall in place as you go down all right let's save that all right so i'm going to just um bring back this image okay and uh so now we're gonna add now let's let's for the sake of you know so we can see what is gonna is happening here so i'm just gonna add um a fixed height to this you know main container so i'm just going to make it a minimum height of let's say 800 pixel oops too much so that looks um uh-huh that looks i think 550 would be would work fine all right okay so that looks more like it so let's start making adjustment now um so now that we have that height you know it's kind of becoming obvious that these are text is too big okay and we're probably at the on the right path before um so so for this um what we made it um six okay so we could just six and six and four so i'm just going to return it to four and five okay so that will just okay and okay all right let's continue so for this we're gonna add we're going to add um this we're going to add a div here that will house these three columns okay so i'm just going to drop a div inside there okay and uh i'm gonna make that um this is gonna go just i just wanna center centauri okay and then this would be like 80 so before that i'm going to okay let me not give it any class because it wouldn't really matter for that so i'm just going to make this um the width 80 or 90 okay let's just make it eighty percent all right let's look at that let's make it ninety it's it's gonna have those three columns so yeah and then i'm gonna drop in the first div that i'm gonna use as the column now for that i'm gonna give it a class so i'm gonna just give this dd column okay design deep column whatever that means um now for these i i want to make this like tall okay so because of um okay this so i want this to you know fill in the whole height okay so um but it really wouldn't matter because by the time we we put everything you know it's gonna fill it in whether it likes it or not so let's focus on this so um i have that i'm gonna add the image to that div okay now that div okay um it's called ddl column so i'm just gonna rename it and i'm going to make it 33.5 with okay um no what am i doing okay yeah so that's so what did i just make the 3.3 with yeah that is what i made okay that's cool okay and it has an image so the next thing i'm gonna drop is is the another div under the image so i'm just gonna drop another div okay and of course it's gonna be a hundred percent width and by the way our image is also going to be a hundred percent width with a height of auto and um i'm just going to quickly drop in the image the first one is this one okay so let it work in for the div i'm gonna drop in um a text and a heading okay and uh the text is gonna be something like a light blue from what we've seen all right so um just gonna move that so something like that i'm not gonna pick the color so now um okay our diff we're just gonna set everything to align to yeah to the right and then we're gonna give that um now that div is um it's deserves to be a class okay so i'm gonna give it a class so dd uh dd column okay inner okay i'm just going to call it that and then that property i'm just going to copy to that class and delete it from the id so we're going to go in and give it um a padding of two ram okay all round okay and this so i'm just going to go ahead and copy that text et go home all right um but i'm going to set this now this also needs to be a class so ddr okay dd column inner text okay so that's supposed to be a class and i'm going to copy the style to that class and delete it from the id and this heading is supposed to be a class also dd column in a title okay and that is gonna be white okay and then i'm gonna drop a text and i'm gonna give it a class and then for the text color we're just going to make it something um whitish dark something like that okay and then so for these i'm gonna copy that um okay but it's gonna be uppercase so let's just make it a uppercase and uh we have to decide on the side so so now we're going to use ram okay so uh this the typical 16 so it uses the typical um like 16 pixels so let's try 0.8 ram just a little bit smaller so it's just gonna have that feel okay something like that um okay our first sighting that caught the size um is h1 so um default okay let's just go ahead and just determine the sizes of this so i'm just going to make this three ram okay three is two okay so i think i like to and then if we go all the way down here i think i'd like it to be maybe something like one point eight okay something like that or one point six so so i'm establishing the baseline for my clamp calculation so 2 1.6 to 2 so i'm just going to go do that 1.6 to 2. for some reason this um calculator doesn't take input from the number parts so that's why i keep clicking um all right so i'm going to copy that and just drop it in here set it to none all right now for this text we have a baseline of 0.8 and i think it shouldn't be much different so maybe 0.6 for it's going to be really small so we just leave it at 0.8 ram okay for all breakpoints we could adjust that later okay so for this we also have to establish a baseline for it so right now it looks like it is one ram okay which to me is fine but if we go all the way down are we okay with one ramp okay so maybe we'll make it point eight man okay so point eight to one okay but that line height we have to do something about it okay so first of all let me tackle the line height just make the line height one all right and then um so we had um one two one to zero point eight so i'm gonna have point eight smallest unit to the biggest unit okay point eight two one copy that so the reason it seems like we're really wasting a lot of times because we are actually doing the responsive stuff while we're working so so that by the time we get too responsive we will have far less stuff to deal with far less stuff to deal with so if we go down you know our fonts will now see the problem there that we had this um div with you know with padding of two rim and then um when we got down to to this breakpoint you know things started moving outside and that's because we still have that two ram active here i see that's the importance of you know using calc okay um so i'm going to use two to one okay so i'm gonna go from one okay to two as a matter of fact i'm gonna go from point eight to two okay then i'm gonna use that for the left and right padding okay so instead of having to go change this manually in each breakpoint so we're going to change this to that unit okay so but it's going to be non-none okay so now if we move down here so you can see things things are looking good okay so um you can see that it's smaller here than it was okay so now for this it's the text is still shooting out so um our smallest value was 1.6 here so to 1.6 so let's just go 1.2 okay so okay so if i move here all right so that works okay so everything falls in so yeah so that is those are the kind of things you spend time doing and then oh my god once you get it right you get it right forever okay um all right so i think then we have to put this blue stuff so that would that's going to be um on this thief okay so we're going to go um side note background and then we're going to drop this as a background okay and uh i'm gonna set it to contain and no repeat okay so i'm gonna add a bottom margin so yeah here and i think it's perfectly fine to just add that in pixel like say um 16 pixels that's too much all right let's just make it um 0.8 ram okay all right so um the sizing is about that and then the first sizing then under here we could just make it one ram the 1.5 okay it does more like it and i guess our padding is a bit more than what they have so we might need to revisit our maximum value which is two so we're gonna go from a maximum from a minimum value of 0.8 to 1.8 so 0.8 0.8 to one point eight instead of two okay all right okay doesn't look like it makes it much better then it's all right and uh the top also i'm just gonna give it the same value all right so let's save this and uh then the next thing i want to do is to bring in this shiny stuff here now to do that we're going to use the pseudo element before and after so we're going to apply that to the id okay so i'm just going to put that on the id um so i'm going to put it um on the before elements of this id okay so um probably should just change this id to let's say [Music] let's say um [Music] dd column okay all right i'm just going to call it dd no no let me just leave it the way it was i don't want any trouble i'll have to rename all of them if i do so so let me leave it the way it is and then i'll go to the before now what thing i do is when i walk with a certain element sometimes it can be very confusing so what i usually do is um i just add you know something and then i add a background color so that i will see what is going on okay oh yeah so i selected the wrong thing now this is what i'm supposed to select so you see see what i mean um oh i've just been working okay so i'm supposed to select this class you know and then this column and then select sorry the id for that column and then go to before so i'm just gonna just put hello and change the background color to red okay so i can see what i'm working with and then i'm gonna go set the height to 100 of the parents okay then the next thing is to um now we're going to set this column because we need to position this pseudo element absolutely okay so i'm gonna go to the original so you're gonna the original you know it's kind of like the parent so i'm gonna go and then set it to position relative and then i'm gonna come back to the default element and set it to absolute position okay and uh then the left i just gonna make it zero okay and then um i'm going to just set the width okay or four pixel all right and that should be big enough to you know to contain that that straight um shiny stuff now at this point i would want to take out that hello i don't need it i'm going to go to background i'm going to apply background to this pseudo element and that's that line okay so it's it's there i'm gonna take out this color i don't need it anymore i used it for reference and then i'm gonna set this to contain and then no repeat okay so um if we take a look so you see we have that um then what we've seen that this shoots out you know from the of the parent okay so to make it shoot out we're going to go back to it and then the positioning i want it to the bottom i want it to be let's say 15 percent okay so see shooting out just like i think it shoots out more there so i'm gonna make it twenty percent all right so so there we have it that shoots out well okay so i'm going to save that and uh let's finish everything before i preview so i'm going to save that and then the next thing i'm going to do is just duplicate this so i'm going to duplicate that all right so let's just go duplicate that column three times and then the div that is the parents we're going to set it to horizontal okay yep i'm going to go ahead and change these images so that we can quickly have a feel all right so i have beam her up so it kind of looks like uh it takes here bigger but then we have one line here and two line here it's all right let's continue and then we'll sort that out if there's an issue okay so um so what we had here was that our maximum was two ram okay and our minimum was was just fine so we're gonna reduce both um increase and reduce and boot in so what we had was 1.2 1.2 and 2 so i'm going to just make it 1 and 1 and 2.2 so 1 and 2.2 so it's just you just have to make this adjustment um to get what you want okay so it's just a little um how about 2.4 here and still leave this at 1.2 okay so it's not giving me what i want i want it to be big enough for the other what did i do okay i think i made a mistake i copied something i shouldn't copy yeah i didn't get that i didn't get that bracket okay so um so that broke everything all right so that i think that's good enough so and if we get to that break point still small enough so at this breakpoint beam her up get there fast all right uh maybe we should still leave this at one let's try that i don't know if that will work okay i guess that that looks better so we still have this all right let's move ahead let's not waste time there okay all right so yeah something like that so here we have a line height of smaller we have four lines of text here we have five lines of text so um so let me just focus on the line height which should be 1.2 okay i think that's a bit too aggressive [Music] all right that should be fine and then we have four lines of text um but i'm just going to leave ours like this all right so the next thing we're going to do is um so we've duplicated this and you see we i want to adjust this this one um does not shoot out like this but the whole column moves up and then this one the whole column moves back and then it has its own on the on the right so so i'm going to just select this column okay and then i'm going to go to the before absolute and then i'm just gonna take that out okay and then um let's see all right so i'm going to take that out and i'm going to move this column up all right so but notice we're not working with the class we're working with the id so i'm going to go to advanced effect transform so we're going to translate y okay and uh i'm going to translate y up so upward so if we put like 50 pixel um that's gonna take it down but we want it to go up okay so so that we're gonna make it like negative 50. okay i think that's fine okay sorry if you've seen any skipping in the video just um i'm with my daughter in the house so i need to so sometimes i have to go and check up on her all right so um so this is gonna go up more so we're gonna make a negative a negative 100 okay so that's a negative 100 yeah and then this is going to be the negative 50 um translate y negative 50 okay so you can see that it moves up a bit and this other one moves up more than this one is going to come down more almost like this but it's going to be a positive unit so selecting that and then this take notes it's not the class it's the id translates y so we're gonna make it a hundred now so that what we're gonna do is we need to add this you know that line here on the right hand side of that particular div now that 100 seems to be a bit much so let's make it 80. okay so let me collapse this okay 18 looks good all right so to add that we're just going to add now we already have it in the before we're going to add it on the after so i'm gonna go to that one and go to after i'm still gonna no no need to write hello and all that just um i'm still gonna do um i'm gonna just repeat what i did for okay a hundred percent and uh and then i'm going to add the background okay set it to contain no repeat okay and then in this case i'm gonna i'm going to set the left okay let's let's we are not seeing it yet okay so i'm gonna go to layout position absolute so it's showing up but it's on the is on the left hand side so i'm gonna make it to stay on the right so i'm gonna put right zero it's there on the right but it doesn't it's not coming to the very edge so if i click out here you can see that it's not coming to the very age you know of the of the column so to solve that um i'm going to select that again and then go to the background setting um am i selecting the right thing okay yeah go to the after all right and then set the left position to 100 so it's going to shift it see so you see it shifted it to to the right put to the right so you're telling it to you're shifting it from the left hundred percent okay and it moves all the way to the right so i guess that you know so that works let's see do we have so yeah it's moving all the way down okay like this so i'm going to and it seems this one also the left is moving down also okay so instead of going up this one is moving down so let's move this first okay so i'm going to go to the absolutely positioned um property okay um of the after okay and then i'm gonna move it down so i'm gonna go to top i'm gonna push it from the top 20 from the top okay so so you see it's coming down 20 from the top then for this one i'm gonna do the same thing um on the before no not the image the column um on the before the absolutely positional setting i'm also going to push it 20 from the top all right so um so you see it's it's looking good you know okay um [Music] i i don't know if you're missing something i think our padding bottom here is just too much so let's take that down a bit to 1.2 okay so so yeah so 1.2 is good okay so what is left okay let's let's take a look at this um let's just view what it looks like on the front end all right so this looks uh this looks quite good um if we compare it with this um i know that this is coming down too much and that's because we really pushed it down with the padding and all so what i'm gonna do is i'm gonna select that um that div okay this div here um note this that's where we had the padding um ddl yeah we have to so as a matter of fact we don't need that padding anymore because of the the you know the settings we gave we gave it here okay this so we really don't need that padding anymore let's look at something else so it's like um this is let's collapse that so i think we have us moving moving towards this now we need to be at the center okay so i think we need to make this a bit smaller okay so um so our div is much bigger than where's that div so yeah a div is much bigger than we that we want it to be because we want it to be just about the same size as you know this so i'm going to go ahead and adjust that 300 okay uh 300 doesn't look like it's so let's try 320. now let's look at this so this is just a little bit you know bigger than so i'm going to work on this so we need to make this just smaller now let me delete the whole of this for now but what was the minimum i mean it was 0.5 okay so we're gonna go back to ram all right and then i'm gonna give it one one ram is so that's one ram so let's go 0.5 what does 0.5 look like not 1.5 0.5 okay so what we need is about 0.6 not 0.55 so it's just gonna be just a little bit you know more than this okay so i'm gonna make it point five three okay so that's good so we're gonna go from point five three okay um i i think we can just leave it like that throughout the breakpoints because it's um it's small enough you know you don't want anything smaller than that um even at the mobile viewport so like this we're gonna just leave that and then for the d if we're just gonna make that d 300 like so so it brings it in you know to the center okay so um since we are talking maximum width let's just see how we can yeah i see that's good okay um so that's kind of does it so a button may have a bigger text bit but it's just fine tuning so we could always do that all right so let's refresh this and see what happens okay so we have that layout so we have these this is supposed to go up a little bit closer to the button so i'm going to select that image and then i'm gonna go to the absolute position and then i'm gonna make it a negative four i get it three all right something like that okay so if i push this uh negative three point two okay so negative 3.6 is all right so i'm just gonna save that okay so we're basically done so the next thing is to add this okay and uh to add that we just need to let's go all the way i want to collapse all all right then select this section and i'm going to add a div inside that section so i have a div right outside the section now i'm going to set the section to you know position relative and that's because i want to absolutely position this div okay so i'm going to just set that div to position absolute and then i want it to be you know to stay somewhere here so it's going to be 60 pixels from the top and then 60 pixels from the right okay so that brings it here and then i'm gonna just drop in some social icons there um okay of course the icon color will be white white and icon size small spacing between icon then i'm going to select this different just centralize that icon inside that div okay um so yeah so we have that and uh it comes down a bit more so i'm just gonna just push it from the top down let's use 80 okay all right so let's save that now we're going to go into responsive now so first of all let's refresh this and see at what breakpoint do we start to do we need to start moving things around okay so i'm going to go to um yeah from the ipad now for me honestly i feel that if you okay if you turn an ipad like this so the ipad landscape that's 1024 which is um this around here now the problem with this is these breakpoints are not exactly the screen size so what i'm gonna do is i've done this before i usually like doing this so i can have um my stuff you know look good so those break points i'll make this 1200 i'm going to make this this 10 24 and actually i like making it one step higher and then this is gonna be eight hundred and one um if you if this is a bad practice please advise me all right so of course the breakpoints have changed i have to regenerate css so i'm doing that now so but let me refresh this so regenerating css while doing that okay so i i think i like the way it is but when you flip it so on the landscape i'll prefer everything these you know to start stacking you know how um vertically so for the ipad landscape it is okay but for the portrait we need to do something so so we're going to go to that portrait so this from where you have the portrait and then um for main container we want to stack these two vertically so i'm just gonna go stack it vertically i'm gonna make this a hundred percent okay i'm also going to make this um did i make that a hundred percent nothing happen i think i didn't actually write is my keyboard okay all right so yeah moving to the second one and uh i'm gonna make that a hundred percent too okay yeah so i i did actually did it on the first one so that's what i did so the two of them a hundred percent okay now for this second div okay i'm gonna come inside here and then um this i'm gonna make this yeah that is supposed to be so why is this not working so we have this a hundred percent we have this oh that is pixels pardon me you see this this this one of the problems the the contrast is just too poor um it's just too poor you know you can't really see what you're selecting all right so that's good now so we have those two and then we need to push this down so um let me see let me explore ways we could do that we could use a bottom margin but what if we use a minimum height so in pixels so let's say if i have a minimum height this d being a minimum height of let's say 600 wait will it work okay so i like that minimum height of 600 and that helps to push it down but i think i will make it 500 so yeah minimum height of 500 but what happens if we go all the way down here so that minimum height of 500 is still okay all right so that means it can be bigger but not smaller all right so since we're working on this breakdown let's continue and then um i think i'll also at this point try to push it down with a negative margin so i can push these ones down okay so um i'm gonna give it a negative margin of uh let's say two ram sorry non-negative margin imagine a bottom margin of two ram um what about three let's see okay so three looks okay and they still interact um yeah it's okay it's okay if they interact yeah it looks fine um kind of like kinda like that um but i would like this to be on top okay so i'm gonna make this top just uh but let's let's explore it first before we start going to do z index and all that i think it should come down some more okay it's too close so i'm gonna just go increase that so instead of using um ram here i'm going to use vmax okay so i'm going to go to none and then i'm going to go to 5v max okay let's try one and see if it's actually working okay it's working so i'm going to go 7v max all right and uh here you can see that our typography has you know really you know adjust properly um now at this point so we're going to do something so you remember now why do we have a white space and we don't have that background remember that we set our section to be a 100 viewport height and that makes it exactly 100 viewpoints so that when you want to scroll it does not grow taller than the set height of the viewport and so we're going to go back to that section okay um and this so we're going to go back there um and then yeah we this was okay here but from this breakpoint we don't want to we don't want it to be now on this breakpoint is still fine but from these breakpoints we want the height of the section to be auto and we want the minimum height to be a 100 viewport height so that means it will not be smaller but it can be bigger so you can see that now as much as the content you know flows you know it it comes in to you know accommodate the content so and then for this one um in this design in this um viewport size we're gonna center this okay so i'm gonna just center that all right so that looks good and then if this doesn't look good hanging just here so for this viewport height i wanna for this viewport i wanna remove the padding from the section i wanna remove the top padding from the section so i'm just gonna go and make it zero so that that shiny stuff will flush on the top and then and this is an absolutely position div okay so i'm going to set it to the center and to do that you're going to go to the layout okay at that breakpoint and still click on absolute positioning we all came from the distance from the top but the the left right distance so we're going to move it 50 percent okay left and then to center it properly now it's going to it's going to go 50 to set out properly we're going to go to advanced effect transform now this is something by now if you've been watching a couple of oxygen tutorials you should know so um to to compensate for that shift we're going to go to and we're going to translate it negative 50 and then that should bring this to the center so that is how to center an absolute position element okay um all right so we have that for that breakpoint i'm going to save and if you go back to the portrait mode of the ipad and refresh so you should have that so you see so if you're on your ipad you see it looks good okay all right so the question now is can you reach this stuff so should we move this up you know so now since we are here we can just move this up a little bit so i'm just gonna move this one go to id it was a translate okay so i'm gonna go to effect transform translate why now it was um it was 80 now we're gonna return it to say like 50 okay nope uh how about let's say zero what does it look like i think we're moving everything what am i doing okay that's wrong that's wrong that's not what i'm supposed to do i'm supposed to it did this okay all right let's go back transform translate so it was i think it was 80. so we're going to make that 50. all right so it moves in a little bit okay so for this one i think it was just nice to move these stuffs a bit around like let's say 40 okay so 40 is good and uh i'd like to move this one down also bye now um let's let's quickly go back now let's let's test it and see how it looks i'm gonna save it so let's see if it's gonna comply all right so it's working okay and then i just wanna move this down a little bit okay maybe this will just slightly down so what we have was negative 50 and negative 100 okay so we're gonna just go maybe negative 20 and negative 70. so okay this i just you know fine tunings that's taking time but let's just quickly unfortunately the builder is beginning to get a bit um a bit slow so it's just unfortunate that um sometimes when working with stuff like this bill that begins to misbehave so we had a negative 100 so we want to make it a negative say 70 okay how about how about negative 50. okay and then for this one i want it to be like a negative 20 or we just leave it at zero okay so let's see negative 20. okay so negative 20 is fine so that that um looks fine at that breakpoint okay so you can say we didn't need to touch the the text we didn't need to touch the paddings everything is automatically calculated all those things we wasted time to do is paying off right now now if we didn't do that we will have a whole lot of work adjusting paddings adjusting font size it's just it's just going to be a mess you understand so that is why we have to spend all those times fixing it at the beginning all right just like building a house you know if the foundation is wrong i mean you just don't want to imagine what will happen so let's um let's refresh this okay so okay so that's okay um that's okay i still feel like this should go up and they should but it's all right um i don't know it's fine it's it's just should this go up should this come actually let's go up a bit more i think they should have gone up just a bit more but i'm fine with that i want to check something um the parent so you see the translate is applying correctly all right so i think this should go up just a little bit more just a little bit so um just 70 should be fine all right i think yeah that should be fine 70 is good all right so now we're going to move to the next break point which is the phone mobile device and at that breakpoint i'm going to select this and then i'm going to stack this we're going to set this to 100 okay and uh yeah and then because we're working with classes all of them you know adjust automatically and then we're going to reset all this translate y okay so um so i'm going to go in and then fix transform translate y to zero what okay all right so i'm gonna go to the iphone just refresh okay so it's not working so and you can see that it's still um so you can see the transform property is it's not working so and this is a problem with oxygen it's kind of a bulky view if you want to reset the transform property back to zero it just doesn't work it's a known bug so to to fix that we're just going to go to none and just add pixel like that manually and then i'm going to go back to all of them and fix that so let's save that and then go and check out on the front end so you can see this stuff all right so you see it fills in okay now on this mobile viewport um you can see that the but these takes are really tiny so we could make adjustments to that again by recalculating the clamp but then what i i want to do is now we just don't want to have one big image here and then this one is here so i want to move this on top of this image and then give it a background and that is for all of them and since we are going to be working with the classes so this div has a class suppose yes it does so i'm going to work with the classes so um let's just collapse this and do with the first one all right so what i'm going to do is first of all i'm going to set this class this column class to position relative all right layout position relative and then i'm going to go to that div and then i'm going to set it to position no not the id the class i want to set it to position absolute so it's going to affect all of them and then i'm gonna gonna set it to sit at the bottom now i could set it to sit at the center of it um it all depends on how you want it to be but i want this to show so i'm gonna go and give it a background color with transparency okay all right so you can see all of them you know all of them are affected and all right so for these um i think this text is too small so let's go back and see what i think i would have loved it to be a bit bigger okay i think here here was um what's good okay and here yeah it's still about the same size you know it's still about the same size i guess it's because we are watching looking at it from this if you're actually looking at it from the phone i presume it's going to look better than what it looks here okay so let's see the small phone so it looks good here all right so that's um i think that's basically it um so another thing is that we have this you know this we still have the shiny stuff at the end here um if you want to remove that how we can do it is to is to go back to to this you know um we go back to the id and then for the first one we had before okay so on all devices yeah we had before okay so we go back to the very last we can just go and while that before i selected layout and display none okay and we do that to these two okay so just go to b4 so we don't want to display that before anymore and uh for this we had before and after so for the third one we had before and after so i'm just going to go there display none and then go to after display none save it and then we're gonna to get rid of that all right so we rid of that and we have our design responsive now what if you just want to move this in so you can stay on the rail you can do that you can always reduce that margin bottom here but for now i think we are done ipad pro kind of looks funny on the ipad pro portrait all right so yep so that's about it but then i think i like the top and bottom margin you know top and bottom pattern here to be to be bigger okay so i'm just going to override um for this you know we will say the calculation was supposed to set it to be small and that is fine that is it's good there's nothing wrong with it before um for because of the type of design i think we should have a lot of breathing room so i'm just going to overwrite on that only on that breakpoint and just make that you know two two okay for all of them uh what am i doing that's wrong that's wrong that's wrong that is not the right thing so i selected the wrong one it's supposed to be this div here okay yeah that's what we're supposed to select okay and make sure we're under class um size and spacing ram ram say two two all right okay so yeah it has a lot of breathing room and i like it that way so i'm gonna save that and then refresh all right so so i guess that looks fine and uh if you have any question you could ask and then if you wanted to make this text bigger now sometimes to be frank sometimes i find that you know since um so one thing i found that is sometimes you can have this text size here and then when you go to the phone even if the same size it doesn't look good and sometimes i kind of like increasing it just for just for the phone maybe maybe the title you know so um we could also do the same to this and this maybe especially this you know um so let's uh let let me select this and then on that breakpoint and the phone breakpoint now the fluid typography did what it was supposed to do under normal circumstance but there are times you may actually need to override it okay and uh for these we're just going to make this um one gram let's see okay i think that's um one of them so what am i doing for christ's sake i think i'm getting tired all right sorry about that guys i was supposed to change the font size um yeah so we have one rim okay and then for this um we're just gonna have like uh two red all right so now now if this were to be this size in on this breakpoint it wouldn't be good okay so but but it even though it's a smaller font size but on the smaller screen it actually looks better if it is a bigger so that's just a design thing okay so yeah there are times you just need so you see we didn't have to do it all across the breakpoint we just adjusted it only on this breakpoint and that really made things look good um let's see the font size here too um this point eight ram um that is yeah i think that's okay and point eight ram should be how many as long as it's not below 14 pixel 1.8 ram in pixels okay so let's see [Music] i said 0.8 you 12 pixels okay okay 12 but i i think it's rather too small so for this i think we're going to make it 0.9 px um ram okay just override that also for this text okay so we're still on that so i'm going to make it 0.9 all right and uh and yeah i think i would like the color to just be a bit more vibrant than what it is on the other breakpoint okay so for the phone we make you know when it comes to the phone it's a different ball game so sometimes you really need to make some extra adjustments all right so guys i think that brings um this tutorial to the end i hope you enjoyed i hope um it wasn't too boring um if you have anything to add any suggestion please feel free to add it and and others will learn and i will learn from you also have a great day and don't forget to subscribe and like and share the video thank you

Channel: Design with Cracka

Views: 4,989

Keywords: #Webdesign, ​ #OxygenBuidler​, #PageBuilder​, #UIdesign​

Id: udmh6cwabus

Length: 96min 19sec (5779 seconds)

Published: Wed May 05 2021