|
After Watching Video ,
Try that
"ClickFunnels Gives You EVERYTHING You Need To
Market, Sell, and Deliver Your Products and Services Online!"
|
one call to action and a sea of infinite , calls to action let's make it look great , on all devices here we are on desktop , things look pretty good let's checkout , our other breakpoints starting with , tablet and that looks OK let's switch , over to mobile landscape getting a , little bit close tithe edge on these , mobile devices so in tablet we can take , a look and we can do this fro many break , point but let's select our container and , from there we can add our container , class this is the one that has padding , on both sides so in mobile devices we , have that breathing room alright let's , make some other adjustments in tablet we , can see that the four across is a little , tight so we can edit our grid we can add , some more rows and the reason we're , doing that is we can reorganize our , content just dragging each of these , items into the different cells so , instead of doing four by one we're , turning this into A by and once , we'vie rearranged we'll go in to edit , that grid one last time and this will , let us remove the three columns we're , not using just deleting each of the , columns we're not using and that's it , press done and we can make adjustments , now to things like typography so if we , select our wrapper we can Center its , content but the H there needs to be , manually positioned because it has its , own alignment properties that looks a , lot better and we can adjust things like , margin just that breathing room , between these because we don't need that , breathing room on tablet we can remove , that from the sections as well with that , padding but keep in mind we're on the , contact' combo class of branch section , so instead of making the change on here , we can undo and select the brand section , and apply it there which means we're , affecting padding on both sections at , the same time we're making adjustment to , one and that serves as the basis for the , other the rest of this looks pretty good , let'switch to mobile landscape and , that looks good mobile portrait looks , good and we can go through all our , breakpoints back up to desktop let's , clean house starting by renaming grid 2 , to something more relevant like contact , grid and we can make adjustments to our , grid itself now something to not ewe can , change the color of the grid guides here , we're gonna make it black and we can , make an adjustment to the column size we , can simply increase using fr-s to , something that gives it a little more , weight on the left side everything wraps , accordingly and everything inside that , wrapper is wrapping as we'd expect let's , paste in some more content we can see , this wrapping and spacing looks good , all of our breakpoints all the way from , desktop down to mobile portrait but , that's our call to action in the next , part of this course we're going to wrap , up our page design with a responsive , grid based footer.
