I promise i have researched this by reading forum/support topics but I cannot get the code to work

[justjane]

I’m trying to fix row and column order from getting out of order on mobile device.

This is the desktop view

This is mobile view

So upon reading forum topics, i attempted to use the following global css added under Theme Options > css

@media(max-width: 767px){
.stay-inline .x-column.x-sm.x-1-4 {
width: 22%;
float: left;
margin-right: 4%;
}

.stay-inline .x-column.x-sm.x-1-4:last-of-type {
margin-right: 0;
}

I then added stay-inline class for each of the affected rows.

Not working so i’m clearly doing something wrong.

Jane

[friech]

Hi Jane,

Thank you for writing in, please remove that custom CSS, that is for maintaning the inline layout of the column and its not the solution to your issue.

The main issue here is you place the buttons on separate ROWs. Please move those button inside on there respective Columns (e.g. Lips, Brows, Eyeliner, Beauty Marks).

Hope it helps,
Cheers!