[Support request] Change order in grid using google optimize

[Anders Nielsen]

Hi there

How can I change the order in the grid – so I can A/B test the order of the containers?

Video in private section.

[Fernando]

Hi Anders,

Can you provide the link to the page in question?

Moreover, are you able to add CSS in you A/B testing tool or it’s just HTML? If it’s just HTML, we’ll need to add a style attribute to the Container for the order.

Let us know.

[Anders Nielsen]

Hi there

Yes I am able to add css, and/or HTML

Link provided 🙂

[Fernando]

I see. If you’re able to add CSS for each A/B test, try adding this:

@media (max-width: 768px) {
    .gb-grid-wrapper.gb-grid-wrapper-d9a49627 > .gb-grid-column:nth-of-type(1) {
        order: -1;
    }

    .gb-grid-wrapper.gb-grid-wrapper-d9a49627 > .gb-grid-column:nth-of-type(2) {
        order: 1;
    }
}

Just change the order value for the other test so the order is changed.

[Anders Nielsen]

Fantastic – it works.

What is the tablet max-width?

[Fernando]

I see. Replace 768 with 1024 so that it applies for Tablet view as well.

[Author]

Posts