[Support request] Questions on designing nice table layout

Hi there,

1. select the Grid Block and make sure the Vertical Alignment is set to Default.

2. Its not really required, each Buttons block can have multiple Button Blocks within them.

3. That would require Custom CSS

Other things worth mentioning — you really need to first consider how this layout will work on mobile….

you really need to first consider how this layout will work on mobile…

For the overall grid.
Theres no point doing a lot of work on making the desktop look right, and then realising the structure does not work for mobile. You need to think mobile first, then work out how to make it work on desktop.

Hi Nicolas,

4. You’re using a WP Paragraph Block which has a default bottom margin. You can replace this with a GB Headline Block and turn it into a Paragraph to control the spacing.

How would the table look on mobile? Would it look exactly the same as it does on the Desktop?

The basics are to use absolute position and transform rotate.

1. Add this CSS:

.has-ribbon {
    position: relative;
}
.is-ribbon {
    position: absolute;
    transform: rotate(-45deg);
}

2. Add a Container Block with a CSS Class of: has-ribbon
Give it some top padding, enough to accommodate the ribbon.

3. Inside the container add a Headline block for your ribbon, and give it a CSS class of: is-ribbon

Please be mindful that this forum is for support, not requests for custom development, so as much as we like to assist users with achieving 100% of their designs it is not always within our capacity to assist.

This is the most i can offer in regards to the Ribbon:

1. Add this CSS:

.has-ribbon {
    position: relative;
}
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}
.ribbon::before,
.ribbon::after {
    position: absolute;
    content: '';
    display: block;
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon mark {
    position: absolute;
    display: block;
    width: 225px;
    padding: 5px 0;
    background-color: #ccc;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-align: center;
    right: -15px;
    top: 30px;
    transform: rotate(-45deg);
}

2. Add a Container Block with a CSS Class of: has-ribbon
Give it some top padding, enough to accommodate the ribbon.

3. Inside the container add a Headline block for your ribbon, and give it a CSS class of: ribbon
Then higlight the text in the headline and from the drop menu in the toolbar, select the 2nd Higlight option.

It is working, But this CSS:

..has-ribbon {
    position:relative
}

You have 2x . – remove one so it is:

.has-ribbon {
    position:relative
}

In these codes provided by David:

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}

.ribbon mark {
    position: absolute;
    display: block;
    width: 225px;
    padding: 5px 0;
    background-color: #ccc;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-align: center;
    right: -15px;
    top: 30px;
    transform: rotate(-45deg);
}

You have to find the correct and preferred width and height values. As of now, they’re set to 150, 150, and 225px. Play around with these values to achieve your preferred look.