DESIGN SERIES: Make Tabs Responsive in Oxygen Builder.

hello welcome to design with cracker in a previous tutorial we you know we we took a look at how to create this beautiful uh tabs element from the facebook community page so we were able to replicate this uh and if you have not seen that tutorial please check um the channel and you will see how we were able to create this now today we are going to take a look at how to make this tab responsive so if i hit f12 and i'm you know try to reduce the screen size you can see things really start getting you know bad here okay so uh so you can see it doesn't really look good so maybe if i switch to like ipad you see it doesn't look really good on the portrait the landscape looks okay if i go to the phone oh everything just breaks so we're going to take a look at how to you know make the tabs elements responsive in oxygen builder so i already have these top elements you know that we designed open in oxygen builder and we're going to take a look at how to make this responsive so if you go to your breakpoints you can see we have this breakpoint it looks okay um at this breakpoint it begins to fall apart so um so we're going to start a dating from this breakpoint okay so the first thing we're going to do is let me pull up the structure panel and we're going to take a look at this now um while we're building this you know there's something that we missed we left out and that was to center these background images so let's go back to the original you know initial breakpoint and i'm going to target the right div that contains the content all right so so tap content so we have a background image set to cover so what i'm going to do is to set the left and the top you know background position to 50 and 50 okay so i'm going to do that for all of them okay so as you can see all of them are now you know at the center you may not really notice the difference here but when we start going to the smaller breakpoints it becomes obvious uh like we saw this was not at the center when we were looking at it earlier so that is what we missed the other time so um unless at a breakpoint of less than 992 pixels uh these images begin you know they really begin to get squashed so what i'm gonna do is i think um what i would like to do is let's check the sizing and spacing so i'm gonna check what do we have there we had um 50 50 pixels okay so um and we had i think we had some margins okay yeah we had some okay we we didn't have a margin there let's see the wrapper d 25 okay so let's check this so at 9 um 92 pixels what i'm going to do is i'm going to select this okay and we have a lot of space here that we are not utilizing so let me check what that space is about so i'm going to go to the initial breakpoint now when you're when you're walking with um you want to do a responsive editing like you want to make it compatible with mobile you'll have to be switching back and forth to check you know your previous settings so i'm gonna you know come here so we have a lot of uh padding here so um if i go to 992 i could bring down that padding okay so let's go back and see we have like 50 you know percent sorry 50 pixel spatting so um coming down here i don't want it to be 50 i would make it 32 and then 32 here so by doing that we already you know get back uh you know us image you know coming back to shape and uh i'm going to select the tabs person image okay and then i want to move it away a little bit so let's go back to the original so we see we had quite some space here and that space was because we had this we have this div called image okay and this div was 25 and that was way bigger than the actual image that's why we had this space so now um here uh we we need to have additional space okay so now this is these are the two divs okay we have the image and we have the div and we have the person okay so we're having some space here also and that space is as a result of you know the pattern here on the tabs um you know on the class yeah this tabs class so i'm gonna go into the spacing and then switch back to the original and check for whatever you know is responsible for that okay so i'm not seeing anything nothing nothing okay so that means it probably is a default padding so i'm going to switch back to the 992 pixels and i'm still seeing something like that so let's try first of all to give it a padding of zero okay so giving the padding of zero you know remove that padding from here so we we have that you know space so now i'm gonna select this okay and then i'm going to give it that's the image wrapper i'm going to give it it's a class so we're working with classes because whatever changes we apply to the class affects everything so i'm going to go to size and spacing i want to give it maybe an eight pixel margin to separate the image from the text so it picks out to the right okay so um that looks okay all right so i think from here i mean we could we could say maybe we will we we okay here so at this break point we are fine okay so let's move to the next let's save this first and then we'll move to the next breakpoint and here things really doesn't look very good so um what i think i'm going to do here is uh let's see what can we do here so um for this let's see this is the right div this is the leftie so this is a main div that is the parents of these two divs okay so i'm gonna select this and start the elements vertically okay at this breakpoint i want them to be start vertical a bit let me undo that but let's check um let's check this website you know let's refresh on the front end because sometimes it may seem that this is very you know small space for this to enter but then in actual sense it is big enough for you to have it stacking you know horizontally instead of vertically so let's check that that's 768 let's go um 768. all right so you can see at 768 it looks really okay and that is the width of an ipad okay 768 is the width of an ipad in portrait so let's go to ipad portrait so you can see that it still looks fine at 768 even though in the builder it does not look good so you may be tempted to stack it you know vertically at this break point because you know from what you see in the building it looks like um you know it's not looking good but sometimes if you come here to check you're gonna find out that it looks really okay so so that is what i do you know um the builder doesn't display you know these things exactly the way it is on the front end so it's always good to check the front end you know to be able to determine if you're supposed to make the changes that you have in mind so that is one tip i have found out so at this break point 768 we're going to let it remain like this so let's check the next breakpoint which is 480 now that 480 is where you have your phones okay so this is a very small phone iphone 5. maybe iphone x is 370 something maybe iphone 6 plus so you can see that at this break point you you have you know it's really small so it probably doesn't make sense for it to stack um you know horizontally let's look at the smallest screen size here probably this iphone 5 okay so you can see it really doesn't look good so from here we're going to start stacking it vertically and then when you start you have to keep in mind all the changes you made okay so you always have to go back to size and spacing because most of the changes you know are going to be on the size and spacing so um these left div if you go to the original size and spacing you can see that we made it a width of 40 so when you come back to 480 pixels you're gonna have to return that to 100 or you just set it to auto okay now um the the deal was the difference between auto and set it it to a hundred percent for instance if we set it to a hundred percent it's still gonna be you know it's gonna it's still gonna fill it in okay i think the only difference is that if we had maybe say like a margin here um perhaps it will the hundred percent will force this to be a full width you know of to take up 100 of the parents but auto will just take up the remaining space so if there was something else so um so that's that's that that looks okay and the next one is this okay that doesn't have a class we're going to set it also to auto so you can see so that but that doesn't look okay this is not how we want our div to be you know so what i'm gonna do is i'm gonna select the parent d i wanna move this i wanna swap this okay i want this to go to the top while this remains at the bottom so i'm going to go to advanced layout and then i'm gonna reverse okay so um so we have that in reverse okay now uh we have all this it's just a long list of the names here so and to me it doesn't really look okay it doesn't really look fine because we have all this you know so if you say if we save this and take a look at the front end uh let's refresh this as the smallest screen size that we have here so you see so you have to scroll all the way up here to click and then you have to scroll all the way back to c so it doesn't it's not a good user experience so we have to find a way to solve that and this text also is really big so the first thing i'm going to do is i'm going to select that tab content this okay and let's go back to size and spacing to the original and the height that we said was a hundred percent of the right div so let's see what's the height of the right div okay we didn't have any height set then at 40 um at 480 pixels we want to set a minimum height so i'm going to set a minimum height of say 400 pixels okay so this this is how long i want my um you know my tab content to be so i'm going to come here and then i'm gonna set my size and specially let's check what we had in the original so we had a height of a hundred percent so why is uh content so it is actually growing so at the tops so now let's go to the tabs uh check we check on the class okay so i'm going to go to the original and see what we did here we have a height of 100 so why is it not filling up okay so what i'm gonna do is i'm gonna go there and set the height to auto it's not working a hundred percent let's try this so none of that is working so all right so what do we have here um so we have set this minimum height and then this is the next one so yeah height is supposed to be a hundred percent okay how about layout it's not working let's check this flex grow one and then this this to vertical all right so okay i think i should back up and explain what i did there so i'm just gonna back up okay i'm just gonna back up all right so um so we've said that to be okay so a minimum height of 400 pixel so now if we take a look at this one so this is not covering up for some reason it's not you know coming all the way down so if we go to the regional we we see that we have a height of 100 so it should push down but it's not and for this one we also had a height of 100 so at this breakpoint it is not stretching all the way down so what we are going to do is to first of all select the tab content okay let's select the right difference and just set this to start vertically okay so by that by doing that we actually set it to display flex and then for this one we're gonna go um we're gonna also do the same thing okay so that we can display as flakes now the reason we're doing that is because we need this property to be active the um flexbox child control so i'm gonna set flex grow to one so you can see it moved and then i'm gonna select the tab content now this is the tab contents plural and then this is the tab content a class that controls all this so i'm gonna go layout and also do the same thing flex group to one so we have that field in now i'm going to select this text this text is a class and i want to reduce the font size so um let's check the original font size is 20 so going to that breakpoint i think i would like to start at this breakpoint to take the font size down to 16 okay so so that this inherits that so that looks okay okay so this this is going to be one of the challenges we're going to have to all right you know trying to solve this problem of having this long um stuff so let's let's get right to it so i'm gonna select this um the the left div okay so we're gonna set this um these tabs okay um the parents wrapper for all the tabs are gonna set it to uh to stock horizontally but we're gonna use the id okay now we go to the original so we see we set it to start vertically you know under you know the general all devices so so you want to be sure that you're making that changes to the id not the not this the class so um it's very important to take note of the changes you made that's why i said the changes you made here is the key so for instance if we go here and then we change on the class you see nothing is going to happen okay nothing is going to happen so this could be a cause of frustration if you're not careful so you want to go to the id and stack it horizontally now so what i'm going to do is so i want to set these tabs to display you know at 50 percent width and uh so you see everything is you know here i'm going to go back to the parent and then i'll click allow multi-line okay so that you know once it fills in the 50 it continues on the next line so the next thing i'm going to do is to select the tab itself okay and then i want to stack this you know i want to start this vertically okay so that is to stack okay so that's not working because i'm doing the wrong thing here so i need to start from this the person okay so it will stack the image and this group okay so you have the person you know is apparent to these two elements these two groups okay so i'm gonna select that and then i'm gonna stack it all right so we can see that is sort of working now one thing i had in mind now the problem you know that we might be faced with is having this here and then you know when we're supposed to have it at the top okay so what i thought was this now what if we at this view you know at this breakpoint we disable this and then have another one at the top okay so we could have let's say um on the the right so what we call the right div okay if i duplicate this and then open the right div and just move it at the top okay so we have that and we could just style we have so we could just style it you know have this um margin let's say 8 or 16 pixel imagine there 16 here and then we bring down our imagine bottom okay so we have that now um [Music] so let's see so we have that there and then at this breakpoint we decide that this headline is not going to show so we go to display none all right and then we have to go back to all devices and then make sure that we select this and then go to layout and display none here so if we go to you know these break point the last one we are going to enable that one okay so enable this one so so you see here we have these this here and here but then here we have this now something like this it's um it can be tricky especially when you're making changes to the website so uh sometimes it's good to you know use dynamic data to populate something like this so that if you make the change you know you make the changes in one place okay um all the changes will take effect everywhere you have that dynamic data you know so for instance if we had a custom field and that we're using setting that data so when we duplicate this um anytime we make a change that you know dynamic field we're gonna have uh that change apply any way this takes it so it's one of the draw boxes if you're not using dynamic data you you probably would make changes on the desktop version and then forget that you had a different text you know different text elements you know here so um so that's just the drawback of this okay all right so um for these ones we so what i'm going to do is let's select this um and then i want to make the width auto okay because remember um here we made the width 25 so and here we didn't change the width okay so so that 25 percent was still active so that's why we make it all too okay then i want to you know let's go to size and spacing if you go to the original we see we had a 32 pixel padding at the bottom so let's go there so we still have that padding active so i'm just going to take it to like eight um eight okay all right now um we we still have so we've reduced that a little bit with it we still have a lot of it okay and um i think what i could do at this point is to reduce these typefaces okay so i'm gonna select this let's check what font type that we use this was 14 so i'm going to go here and just make it say 10 and then i'm gonna make this 10 also okay and i think we have this justify um text so i'm just gonna text a line to left okay and let's see so that's that's good all right now i want to go to the image wrapper okay uh the image wrapper and just set um a margin bottom of say 8 pixels just to push this down all right so we have that and how does it look so we can change you know this so i still think we we can you know we still have enough space to play around so um with that you know left div yeah selected i'm gonna go and you know just reduce the padding so eight and eight so we have that okay so what if we make everything centralized here so okay so let's try this so i'm gonna go to these parents for these and just set it to centralize okay but we have already set our text to left a line so i will have to go and overwrite that um [Music] go to the text okay and then set it to central light so everything is centralized now okay all right so let's save it and see how it looks so far at the front end all right so we have so you scroll in and then you have meetup community leaders and then you click but then we we're still losing you know screen um because you still have to come all the way up here before you scroll up so i want a situation where where you can actually have everything in the screen you know at least up to this point i mean this looks like you know that could work but what if we could have you know all these icons line up now i'm trying to do something like what if we have all this like all these pictures line up under here and then we have this section a little bit longer i think as a matter of fact we have to reduce this um this text okay so we have all this lineup and then we have the names written inside here as you click on the icons on the pictures so let's do it like that so i mean if you're okay with this i guess you could just stick with this but i want to push it you know further so first of all i'm going to reduce this text so um originally this text was 20 so i'm just going to move it to 16 okay um so we can have enough space and then for this um right div we had a minimum height of 400 which is okay but i'm going to move it to 500 okay and and then what i'm going to do is for this name and position okay so um i'm gonna just um i think i'm gonna duplicate that okay so i'm gonna duplicate that and then i'll move it here all right so i have that here okay so um what i'm gonna do is i'm just gonna change the text to white so i'm selecting these um these parents you know the parent wrapper so i'm just going to change the text color to white and it didn't affect this one because this one had a class you know that defined the the text color so i'm i think i'm going to just you know change that from the class to white okay so um and also of course i'm going to stack it like this all right um what else can i do i can you know just reduce that padding a little bit let's just go in make it 16 okay and uh the text can be like 12. uh okay so yes it doesn't matter because we are taking this off so i'm gonna take that [Music] um let's go here okay so i think there's a problem here right now so we we're having this text becoming white because we you know right here what i did was i used the class to change so i'm going to remove that okay so let's keep looking at it from here so it has a class position so i'm just going to say give it another class position mobile okay and then just give it a text of white okay so that still retains the color of this one all right and then for this uh let me remove that font size from there okay did i do okay all right let me just take out that front side so the name is i like the way the name is big like that so all we're going to do is um also what what we did you know we we move this you know to align to left and that affected this so i don't want that to happen so i'm just going to give it a name put another class of name pose wrapper mobile all right so and so i'm going to use that to you know align it so that it does not affect these classes okay all right so this text is white and that's because we changed the i think we changed yeah we changed the color on on the on these okay we change the color so white so i'm going to remove that okay so we can get back our colors here and then i'm going to go to the mobile class and set the color to white all right so we have everything you know on the face on the first tab and the tab content all right so what i'm gonna do now this is actually good because we used dynamic data to insert c so even if we change you know something changes here it's going to update here automatically so we can safely go back here all right to the person group and only this the name and position and we can set it to display none here okay but we want it to display here so okay so it's displaying here it's displaying everywhere except here now for this one for these um i'm gonna select that and then i'm gonna go to all devices layout and set it to display none and then i'm going to come all the way here and set it to okay yeah so it displays flex there so it displays none on all other breakpoints but for the last breakpoint it displays here so um i want to repeat the same thing to all of this so i'm gonna go to um this and i want it to display for now okay the name and position okay i wanted to display for now so that we can duplicate this to the next um to the next tab content so i'm going to select this okay select the parent for annie scott all right um and i'm going to then what i'm gonna do is i'm trying to figure out what should i do should i just duplicate this or should i duplicate the one we already set up but then if we do that we have to go back and start applying the dynamic data for person two so yeah i think that is easier than you know beginning to apply classes so i'm just gonna go to tab content all right so let's let's close let's collapse everything and uh go to the tab content so we have this here okay and then so i want to duplicate this and move it here so we have that okay so i want to change this so i want to insert that data you know advanced custom field person2 name okay and then um do the same here in set data advanced custom field person2 position now um if you did not see the first part of this you know so try and do so so that you understand how we got all these advanced custom fields in okay so we have that i'm gonna do the same thing i'm gonna duplicate this i'm going to duplicate this and then i'm going to move it into this okay that is for the third one for this okay and then i'm just gonna do the same thing and set data person three name and then the same for the same for the position person three position all right and then we do the same thing i'm just going to duplicate that and then move it all the way here all right so the last one so do the same thing you said person 4 name and then we go for this person 4 position all right so we're done okay so and and then we're going to so i want to delete this you know name and position group okay not delete per se but i want to set it to display none all right so it's displaying none right now but on the all devices it's showing and the other one is not sharing because we use classes so everything is applied you know automatically all right so the next thing i want to do is instead of setting these to be uh 50 okay i'm going to set it to be 25 so we have all this but i don't want it to be this tall so i have to figure out where is that you know that height coming from is it from here no so it's from here so it means we have some sort of you know spacing so i'm going to just take the padding to zero first of all and i think that should do so i'm gonna return that to eight okay and maybe the bottom eight so we let's leave the bottom at zero okay so um so yeah so we have that okay so i'm going to now all right so this this works so i'm going to save it and refresh this page so so you see we have something you know very compact so if you come here and you know on the phone and then you click here at least we have up to this point you can see everything so you can just click that so yeah so let's try checking it out on responsive so so we have this okay and then as we move in everything is still looking good now one thing with you know using this method is that you know sometimes you're good you you know you're gonna go um you get to the point where you get you know in between break points that you don't have settings for and things are gonna look you know funny but in actual devices you know you may not run into this kind of problem so um but if you do you probably may need to use um maybe custom css media query to solve that issue unfortunately oxygen doesn't allow you to add you know custom breakpoints okay you can only define the width for the ones already there so let's keep going all right so that breaks okay so this looks good okay so that looks even up to a very small screen size up to 280 so it looks okay so let's look at actual devices so i'm going to start with the ipad pro it looks good here let's go to the ipad portrait looks good landscape looks good okay so let's go to the bigger phones iphone x so you see we have that the name comes up here and uh let's go to all right this still looks okay iphone 6 looks good iphone 5 looks good so we have a lot of text here i think what i i would also i would have loved to do is to take this text down some more maybe reduce the size a little bit but you know that is you know up to you to decide if you would want it to be smaller but from a design perspective i think from the way it was from the very beginning i think it's okay because we really had a very big size text here so so i guess we could just leave that because the emphasis was really on that quote all right so i think it's in place it's uh it's okay so yeah so that is the conclusion of making our tap elements you know responsive all right i i hope you enjoyed this tutorial and you learned something from it so what i'm going to say is this i'm going to recap by saying that you know one of the you know the tips i'm going to give you is this first of all if we did not label our you know our divs properly it would be really difficult to navigate okay all this it would be really difficult so one of the things you have to do is make sure you label okay your divs is very important it's especially when you're working with a lot of content so labeling them makes it easy for you to be able to find what you're looking for then the second thing is when you want to work with responsive you want to edit responsive mode you always have to go back to the original to check what you know where you made the changes was it on the was it on the id you know the original setting was it on the iv on the id for instance this had a setting on this you know name post wrapper so if you're going to the responsive you have to and you need it to make changes so that you have to make sure you're on the same class okay so you have to be sure you're selecting the same id or class that you know had the settings you know on all device you know all devices so um so yeah so that's it if you have any questions you can ask in the comment section if you have any suggestion and if you know of a better way we could have handled this you know instead of creating new um instead of creating new um new elements okay i'm moving them up and you know disabling the other ones um you let us know also we will be glad to learn from you also so um but i thought this was the approach you know i would have taken you know and like i said earlier um having something like this you know using dynamic data is really good it's really important so if you want to make this kind of changes where you have duplicate elements you know for different devices you want to make sure that you're using dynamic data to insert you know that content so that you only have to change it at one place because if you're changing it right here like this one we could do let's say for our community leaders and then you say no you don't only that you want uh community hates okay and then you forgot that you know you needed to change that in the mobile and then in the mobile it still shows leaders okay so so that's the that's that's the drawback of using this method if you're not using custom fields but for the names and the positions here we already are using custom fields so if we make changes to any of this you know it's going to automatically show up here so that is what i wanted to keep in mind so if you like this tutorial do hit the like button share with your friends and hit the notification bell you know so that you'll be notified next time i do a tutorial and i promise you i'm going to bring you some really interesting tutorial in the future in the near future actually have a great day

Channel: Design with Cracka

Views: 1,572

Keywords: Web design, Oxygen Buidler, Page Builder, UI design, Tabs

Id: HuPfAe_cONE

Length: 40min 7sec (2407 seconds)

Published: Sun Mar 14 2021