Widget CSS Snippets

Last updated:

September 21, 2023

Widget edits

‍

Check out this article first if you haven't already to see how to apply these snippets to your campaign, click here

‍

1 row of 3 side-by-side widgets

‍

/* 3 side-by-side widgets */

@media (min-width: 1028px) {
gb-hub-detail .module-container {
flex-direction: row !important;
}

gb-hub-row:first-child {
width: 66%;
}

gb-hub-row:nth-child(2) {
width: 33%;
}
gb-hub-row:nth-child(2) .hub-row-container {
padding-top: 100% !important;
}

gb-hub-row:nth-child(2) .hub-row-container gb-hub-button {
max-width: 100% !important;
flex-grow: 1 !important;
margin-left: 0 !important;
}

gb-hub-row:nth-child(2) .hub-row-container gb-hub-button:nth-child(2) {
display: none;
}
}

/* Center odd widget */

gb-hub-row:nth-child(2) .hub-row-container .hub-row-inner {
justify-content: center;
}

‍

4 side-by-side widgets

‍

/* 4 side-by-side widgets */

@media (min-width: 1028px) {
gb-hub-detail .module-container {
flex-direction: row !important;
}

gb-hub-row {
width:50% !important;
}
}

3 and 2 widgets for 5

‍

/* 3 and 2 widgets for 5 */

@media (min-width: 600px) {
gb-hub-detail .module-container {
flex-direction: row !important;
justify-content: center;
flex-wrap: wrap;
}

gb-hub-row:first-child {
width: calc(66% - 8px);
}

gb-hub-row:nth-child(2) {
width: calc(33% - 8px);
}

gb-hub-row:nth-child(3) {
width: 66%;
}

gb-hub-row:nth-child(2) .hub-row-container {
padding-top: 100% !important;
}

gb-hub-row:nth-child(2) .hub-row-container gb-hub-button {
max-width: 100%;
flex-grow: 1;
}
}

@media (max-width: 600px) {
gb-hub-row:nth-child(2) {
margin-left: 25%;
}
}

‍

3 and 3 widgets for 6

‍

Widgets setup:

Add 6 full width widgets (one per row). See Ocean widget page editor for example

‍

/* 3 and 3 widgets for 6*/

gb-hub-detail .module-container {
flex-wrap: wrap;
flex-direction: row !important;
justify-content: center;
gap: 0 !important;
}

gb-hub-row {
width: 50% !important;
padding: 8px;
}

gb-hub-row .hub-row-container {
padding-top: 100% !important;
}

@media only screen and (min-width: 1028px) {
gb-hub-row {
width: 33% !important;
}
}