Docs

[Houston]

Why does this far right column have such a huge gap at the bottom. I see nothing that would cause this. If I remove the Custom PayPal button, the column shrinks vertically but there is still a gap at the bottom that should not be there.

http://www.splitlightdesigns.com/tammp/

Many thanks,
Houston

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-column.x-1-3 form {
    margin: 0;
    height: 30px;
}

Hope that helps.

[Houston]

This seems more like a hack. I am not really understand why this is doing this in the first place. If I restrict this to a height of 30px, then the mobile device will display this incorrectly. Am I wrong about that?

Many thanks,
Houston

[John Ezra]

Hi Houston,

Thanks for updating the thread! There are a number of ways to go about this. You could restrict the previous CSS provided to screen widths above mobile, like so:

@media (min-width:480px) {
    .x-column.x-1-3 form {
        margin: 0;
        height: 30px;
    }
}

Another way is to get rid of the text element that has is creating a few lines of spacing below the form. If you can’t find it, you can use the following CSS instead:

.x-column.x-sm.x-1-3:last-child 
.x-text:last-child {
    display:none;
}

.x-column.x-1-3 form {
    margin: 0 0 -80px;
}

Note: I added a negative bottom margin to the form to make it have better spacing on mobile.

Hope this helps – thanks!

[Author]

Posts