|
After Watching Video ,
Try that
"ClickFunnels Gives You EVERYTHING You Need To
Market, Sell, and Deliver Your Products and Services Online!"
|
so we'vie built our brands wrapper it , looks great on desktop now we're going , to verify it's fully responsive and , scales appropriately when we're in our , other breakpoints tablet mobile , landscape , mobile portrait and single pixel now , this is going to be pretty , straightforward in tablet view we can , grab the handle and test responsiveness , that looks fine , let's test mobile landscape and we can , see almost immediately there's a , stretching almost a squishing vertically , it's worse in mobile portrait so in , mobile landscape we'll just select , anything that has brand's image applied , and we'll make an adjustment we'll , change the height back to auto and that , means we're not setting that W pixel , height anymore and also on the brand's , parent we can just Center Center , vertically if we test everything scales , just as we'd expect it to regardless of , the worldwide what about mobile , portrait well let's test that , let's test mobile portrait and if we , grab the handle and adjust we can see , everything shrinks just as we'd expect , it's a little tight with the text so we , can go backup to mobile landscape and , make change to the font size and the , line height so let's change the font , size drop that a little bit maybe , pixels that looks pretty great and the , line night let's just make an adjustment , to the line height now on the section , itself let's drop that padding a little , bit let's give it a little less , breathing room with Lhotse's that , looks a lot better now our container is , the stock container let's apply that , same class we created before so that we , have that pixels of padding on the , left and right that gives it a little , more breathing room in both mobile , landscape and mobile portrait here so we , can see as we test responsiveness that , the padding on both sides gives our , edges some more breathing room between , the logos the heading sand the edges of , the viewpoint back to desktop for , some final tweaks on our design what if , we want to apply some spacing Justin , the brand'sim age class well with the , brand's image cross selected we can , apply that so we're essentially , effecting spacing without adjusting , track size here and that's the thing to , note about grid since each row is set to , auto making changes to any one item , inside the grid will affect the sizing , of that grid now just a clean house , let's make some final changes tithe , styling we'll double click to rename , this heading we're gonna call it smaller , heading and we'll make an adjustment to , the weight of that fun right no wit's , W bold let's make it W normal that , looks alto better maybe an adjustment , to the font size but that's it that's , making fully responsive brands wrapper , next we'll build out a call to action so , people can reach , and get in touch
