Center Forms with New Responsive Feature

[kpcollier]

Upon using the new Responsive DataPages feature from Caspio Release 21, I noticed all of my forms that had this enabled were aligned to the left. I couldn't get any of the solutions already in this forum to center my datapages. The new Responsive feature completely restructures the HTML of the DataPages.

I have tried a lot of things. In DevTools, if you select the .caspioform element, you can add 'text-align: -webkit-center;" and it works. However, try adding this CSS rule to your DataPage, and nothing happens.

Edit*:

Live Chat has helped me find a fix.

[action*="[@cbAppKey]"] > div:nth-child(1) {
margin: auto !important;
}

This should center your DataPages. They are working on adding it to Styles.

[Altair]

I also managed to make it work using a Style so you can easily apply it to multiple DataPages:
 

[kpcollier]

@Altair Nice find. I couldn't get the webkit method to work from directly on the DP. The script updated above works, however. 

LC also said they are implementing a quick and easy setting for it in Styles, so we should be alright!