Docs

[markwest]

Hi Folks,
I’m having trouble figuring out why block grid stacking is working on one page of my site and not another – I’m really hoping you can help me get it sorted out please 🙂
The page that’s not working is
https://millersmartialarts.co.uk
The page that is working is
https://millersmartialarts.co.uk/about/
I’d really like the home page to work the same way as the About page – when the screen gets smaller the image stacks on top of the text. Currently on the Home page the image and text stay side by side?
Thanks for taking a look.
Mark

[Rue Nel]

Hello Mark,

Thanks for writing in! Your block grid is not stacking on smaller screens because you have added an inline css width: xx%. This inline css affects the smaller screens. To resolve this, please edit the page back in Cornerstone and then insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 767px){
  .x-block-grid.two-up>li {
    width: 98% !important;
    margin: 0 auto;
  }
}

We would love to know if this works for you.

[markwest]

Thank Rue,

That’s fixed it, but, does that mean I can’t have different width columns? Is there a different way to achieve this that would work with different width columns? Maybe using columns instead of block grid?

I’d be interested to know as ideally on a couple of pages I’d like the pictures section to be wider than the text section?

Thanks again.

Mark

[Rupok]

Hi Mark,

If you add the inline CSS then the usual behavior will be changed. It would be better approach if you add custom class and control the width with media query as shown on the Rue’s suggestion.

Cheers!

[markwest]

Hi Rupok,

Thanks for the reply. I will read up on media queries – I am by no means a CSS expert.

The CSS Rue sent only seems to control the width of the Block Grid container (98%) – not the individual block items?

I’d like to have Block Grid item 1 be say 66% and Block Grid item 2 be 33% – when full screen – but when on mobile have those blocks stack and become full width (of the mobile screen).

Thanks very much again for all your help.

Kind Regards

Mark

[Rupok]

Hi Mark,

Thanks for writing back. So you can add the CSS only for desktop with this code :

@media only screen and (min-width: 980px) {
.x-block-grid .x-block-grid-item:nth-child(1) {
  margin-right: 2%;
  width: 66%;
}
.x-block-grid .x-block-grid-item:nth-child(2) {
  width: 32%;
}
}

Hope this helps.

[Author]

Posts