Site logo

Archived topic

Change order in grid using google optimize

5 replies · Started by Anders Nielsen on October 13, 2022

Viewing posts 1–6 of 6

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.

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.

Hi there

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

Link provided :)

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.

Fantastic – it works.

What is the tablet max-width?

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

This archived topic is closed to new replies.