I made a card module, but when it comes to center the module on a page, the CMS editor does not have a option for horizontal aligment.
Perhaps the only way to fix this is by adding a wrapper to my module and add the options for the user to horizontally align the card.
But why the CMS editor doesn’t have this simple option built in? I am talking about centering the content inside the rows and columns of a section. It should be integrated since HubSpot provides those wrappers.
In the picture below, you can see how in a mobile viewport the card is not centered and the CMS editor does not have an option to set the horizontal aligment.
Good point you have. You can make a request at HubSpot Ideas. It they build in a option to set the margin to auto instead of 0 (zero) that would solve it.
But when it comes to modules, there are a lot of options to think of. How will it behave on a full width page, responsive, inside columns and rows etc.
First question that came up my mind.
Why is the module not stretched 100% the with on mobile? That would solve the problem in my opinion.
What options did you include into the module itself?
Is it repeatable so you can have 3 cards next to each other?
And if that’s possible, are they stretched the same height to have a more uniform design.
All things to think about developing a custom module.
Hope this helped you. If you submitted an idea, please share so we can upvote!
Perhaps we could see this implementation in the near future.
All you say about things to keep in mind when it comes to module creation are true. As developers, we have to keep in mind all possible escenarios our modules could potentially face.
As I mentioned in my post, my solution for this particular case, was to create a div class that wraps the card with flexbox. Then the horizontal alignment can be customized from a style variable inside the module.
