Centering the Gift Card Pro form on your Storefront

Depending on the theme you are using, the Gift Card Pro form on your storefront may skew to the lefthand side of your page. Some simple CSS can be added to centre the form, and get everything looking good.

Go to Gift Card Pro –> Configuration –> Appearance Settings. In the Advanced Settings section, enter the following code into the top Custom CSS Editor:

@media (min-width: 600px) {
	.gc__layout_wrapper {
		padding-top:50px;
	}
}

@media (min-width: 1300px) {
.gc__layout_wrapper {
    overflow: hidden;
    max-width: 80%;
    margin: 0 auto;
        }
}

@media (min-width: 1600px) {
.gc__layout_wrapper {
    overflow: hidden;
    max-width: 70%;
    margin: 0 auto;
        }
}

.gc__gift-card {
    top: 70%;
    }

The first three items here will ensure that depending on the screen size, the form will be centred appropriately. The bottom item will allow for a little space added to the top of the form, so that it is not to close to your header section.

As ever, if you run into any issues with implementation, please don’t hesitate to get in touch with us at support@gist-apps.com.