Row gaps are frustrating
I spent about two hours this morning trying to remove a little gap between the rows on my front page. Now that the demo content is loaded and I’m sure you’ve started to play around inserting your own photos and text, you’ll likely start to notice changes. Not the gruesome kind occurring during your teenage years but the pesky, drive-your-OCD-crazy kind that won’t go away.
I’m talking about removing row gaps. Even though my homepage is temporary, I was still wanting to class it up with a nicely done grid layout. For some reason my theme, Shopkeeper, or my builder, Visual Composer, was inserting a little gap between my row elements. The only positive side was that it at least had my global background color added. Something was working correctly at least.
Ugly 55 pixels
I kept looking at the margin, border and padding spacing for all of the elements that I had. The row, the column in the row, the image itself – no stones were left overturned. I even broke out the trick of opening the page using Chrome’s inspection utility by pressing CTRL+SHIFT+I. From there, you can click on elements in the page and find out what <div> class they belong to.
I was narrowing it down
What I saw from using the inspection utility was that the gap belonged to an “inner column”. That is code for the column that help the single image inside the top most row. Visual Composer breaks pages into what are basically tables. You add rows, then add columns or elements to fill each row with your content. Because I knew it was a column based feature that was throwing me off, I started to click on every button and setting I could find. It didn’t work.
Those dashes.
When you look at the Row Settings tool (or pretty much any settings in the design tools) in Visual Composer, you’ll be able to look at General or Design Options. In the Design Options menu you get to configure a few things such as the margins, borders and padding. Remember those guys? The big thing to note here is that a DASH IS NOT A ZERO! I had wrongly assumed that because a dash was in each cell that it represented zero padding, or no borders; zilch margins. In fact, what Visual Composer is doing is relating a dash to a site-wide default.
Defaults aren’t always great
I don’t know where the default is saved or how to go about changing it, but you are supposed to override it by entering values into those little boxes. You can do pixels, percents and probably other stuff. As soon as I realized this, I changed all of the boxes to zeroes and voila!
No more gap.
I’m no best practice web developer but it does seem that you should do your best to fill out all of the options when you can. Follow this up by testing and more testing. Those defaults are there to ensure that your site scales to mobile screens and you don’t want to break that code.
Check out my improved homepage. No gaps allowed.
The Tube.