Fixing a Broken Template with Pinegrow
Flatty, a free Bootstrap theme from Black Tie, is a beautiful and elegant theme perfect for a simple landing page. But its grid layout only works properly on large screen sizes. See how we used Pinegrow to fix the layout issues. Plus we made the theme customizable with LESS variables.
See the video of the whole process or read the overview.
Watch the video
Twelve minutes action packed with web design magic 🙂
Read about it
It is easy to spot the problem once we open the page in Pinegrow and display it at different screen sizes. Take a look at the page header. Large size (the first one) looks ok while headers in medium and small views are broken into two rows. Mobile phone header feels cramped with too much space at the top:
Clicking on the left column in the header reveals the reason: column span is set to 6 (half width of the container) only for the large size. All other sizes have no span set, which means that the column on medium (shown below), small and extra small screens takes up the whole row:
This is easy to fix. Instead of having span 6 (half width) set on large size, we set span to 6 for small size on both columns. The page already looks better:
In the above screenshoot we can also see that the header title has a manual line break which breaks the title. We get rid of it by double clicking on the title and editing it right there on the page:
The hand picture in medium size (right) is floating in the air. Exploring CSS rules reveals the culprit –
min-height:650px; – on the header:
Can we simply remove the min-height? Lets show all the sizes and try. Great. All hands are touching the bottom. A note for those not watching the video – when we change something, all open views of the page update in realtime.
Invite Me! button is pushed to the second line on medium size. It doesn’t look good without a space between the button and the form field:
To add margin above the button we create a CSS rule for header button:
…and set margin top to 10px. We also set media rule field to
(min-width:768px) and (max-width:991px) because we need this margin only in small screen size:
In a similar way we also fix button on extra small size. We make it span the whole width of the column and add bottom margin to create space between the button and the picture. In Pinegrow we can edit CSS rules through properties or directly write the code.
Small and extra small displays still have too much empty space at the top:
Again, we take care of it with CSS rules and media queries:
Next, we fix a couple of grid issues – narrow the features columns on medium size and center the slideshow below that:
And we did it! Flatty looks great on all screens:
Why stop here? Lets improve the template by replacing hardcoded CSS values with variables:
We use these variables in CSS rules:
Pinegrow uses LESS engine in the background. Less file is always saved besides the regular Css file. We can also edit Less code (and Html) directly:
Once we have variables set up, we can easily customize the template just by chaging variables – without changing CSS rules:
So much for now. We used Pinegrow Web Designer to quickly spot layout problems, fix them and make the page customizable with variables.