CMS Styling - Sizing
Various elements on your platform, such as images, logos, buttons and containers can be manually sized to adjust their height and width.
The fundamental styling that you use for this is h-## (e.g. h-24 ) to define the height and w-## (e.g. w-36 ) to define the width. This defined value can range from as small as 4 to as large as 96, but only at certain intervals, which are provided in our platform editor.
It is not necessary to define both the height and the width. If you only define one of them, the other will automatically adjust depending on the default behaviour of the item which you are defining. Often you will want to only define one of them, for example if you have a group of sponsors' logos and you want them all to have the same height so that they will be aligned horizontally, but the width can vary depending on the shape of the logo, then you will only define the height.
Another styling option that you might want to use is h-full, which sets the height to be 100% of its parent, as long as the parent has a defined height.
Similarly, you might want to define the width to be 100% of (or a fraction of) the screen width, which you can do using w-full, w-1/2, w-1/3, w-1/4 or w-1/5.
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
The fundamental styling that you use for this is h-## (e.g. h-24 ) to define the height and w-## (e.g. w-36 ) to define the width. This defined value can range from as small as 4 to as large as 96, but only at certain intervals, which are provided in our platform editor.
It is not necessary to define both the height and the width. If you only define one of them, the other will automatically adjust depending on the default behaviour of the item which you are defining. Often you will want to only define one of them, for example if you have a group of sponsors' logos and you want them all to have the same height so that they will be aligned horizontally, but the width can vary depending on the shape of the logo, then you will only define the height.
Another styling option that you might want to use is h-full, which sets the height to be 100% of its parent, as long as the parent has a defined height.
Similarly, you might want to define the width to be 100% of (or a fraction of) the screen width, which you can do using w-full, w-1/2, w-1/3, w-1/4 or w-1/5.
Save and publish
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
Updated on: 07/11/2024
Thank you!