This will make it my first project at a UK telecoms company called PlusTelecom. The objective is simple, convert the PSD into mobile-first & mobile-responsive layout using the Bootstrap framework.
But did they really think it was that simple 😀 One of the issues I ran into was the positioning of the hero image and the big logo and the contact form. Because in the mobile version ( I sure was lucky to have been provided a mobile layout in PSD hehe) the hero image switch places with the form. So the mobile setup would be logo first, followed by the hero image, and then (lastly) the form.
Luckily I was using the latest version of Bootstrap, 4.1.1., and it already supports Flexbox. So how did Flexbox save my day?
Here’s how Flexbox became my hero
If you look at the layout immediately you would perceive that the hero image should be built first, followed by the logo and then the form… right? That’s how I constructed my page as well. But the normal flow of the document won’t allow the form to sit underneath the logo and beside the hero image… even if you float it to the right. The form just sits below the hero image and I ended up pulling my hair and thinking of a way to make it float to the right.
Then in comes Flexbox. I first created the div that would hold the logo and let it float normally on the page, which is the left side of the page. And then I created the div that holds the form, and that too floated to the left by default. Doing those two first made it easy for the form to float to the right side of the page. I know what you were thinking… that its on the wrong side of the page. Yeah, I know haha. That’s where the flex property row-reverse comes into play. You first declare the parent div that you’re using flexbox, I used d-flex for that. Then alongside d-flex, use flex-lg-row-reverse. This will instantly flip the two columns without even messing with your CSS.
So what’s the downside?
Huh? Did I mention anything about a downside? … nah, yup there is actually one. But its not about flexbox, but rather on the Bootstrap classes. You see if you used the Bootstrap classes in your html and then tried to test your page with a mobile screen emulator, the page will look like Godzilla walked on your page hehe. Don’t freak out if this happens, a simple page refresh would do the trick.
So, when building mobile-responsive pages, stick with CSS if you’ll be using Flexbox. Don’t try using the classes in-line with your HTML code.