2 column block grid in mobile, not working

[SuitedCreative]

Hello-

My client’s site is being refreshed in staging.
On the live production site, a page with his restaurant’s menu was built using block grid, 2 columns.
Left column has menu item (left aligned) and right column has prices (right aligned).
When copied from production to staging, I cant get it to work … at all; not just mobile! The block grid doesnt even give me 2 columns in desktop. Help!

Best,
Drew
SUITED

[SuitedCreative]

Update:
I carried over the CSS from the last time I wanted the 2-block grid to remain 2 columns in mobile, and now its working again… in every size except mobile. At about 480px wide, it stacks again.

Code used(on content/page css):
@media (max-width: 480px) {
body .x-block-grid.two-up>li {
width: 47.5%;
margin-right: 5%;
}
body .x-block-grid.two-up>li:nth-child(2) {
margin-top: 0;
}
}

[ruenel]

Hello There,

Thanks for posting in!

I have checked your staging site and I could not see that you have applied the code. If you happen to removed it, please put it back. It should work in the site.

@media (max-width: 480px) {
  body .x-block-grid.two-up>li {
    width: 47.5%;
    margin-right: 5%;
  }

  body .x-block-grid.two-up>li:nth-child(2n) {
    margin-top: 0;
    margin-right: 0;
  }
}

Please let us know how it goes.

[SuitedCreative]

Not sure what you did (if anything), but I pasted the code back in the Global CSS and it’s working again!

Thanks

[ruenel]

Hey There,

You’re welcome!
We’re glad we were able to help you out.

Cheers.