Styling the Connect Modal

If you’ve just installed CardanoPress and you have managed to get the connect button working for your wallet but you’ve noticed that the modal looks a little off, thats ok. We have a small code snippet here that will help out with the styling.

The core of our plugin uses and follows Bootstrap as our core theme that we distribute is a Bootstrap based theme. As a result, to get the styling perfect and working nicely with other non-boostrap themes, you will need to copy over a little bit of styling.

With any CSS customizer, add in the following code:

.w-full.max-w-sm.mx-auto.text-left.bg-white .px-6.py-4 + .px-6.py-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 15px;
    margin-bottom: 10px;
}

This will position each wallet connector into a nice 2 column layout. It can be adjusted to your liking and design of the website.