Grid specific breakpoints

[kgpthemex]

Hi,

I’m working in the most recent version of Pro, i.e. 5.0.8 with the presumably the most recent version of Cornerstone.

I’m currently focused on the Grid element. My question was, how do I specify grid-template-column and grid-template-row through the GUI? In the docs (referenced below), I see reference to this but the screen I’m working with no longer resembles this…unless of course, I’m in the wrong place. I’m searching within the cell element.

Since I could not find it, I thought maybe the general breakpoints on the side could serve as the ones necessary to create breakpoint-specific cell layout. Unfortunately, it seems they only serve as general breakpoints for viewing purposes.

Help would be appreciate it!

[tristup]

Hi @kgpthemex,

Thanks for reaching out.
We are not clear about what do you mean by GUI. While adding a new Grid element you can find a Choose Layout option shown in the screenshot below.

You can also specify the Columns using the Columns Template options as shown in the given screenshot.

If that is not the case and you are trying to point out something else, please provide any screenshot or any video that helps us to recognize what you are trying to show.
Thanks

[kgpthemex]

@tristup,

Thank you for the prompt reply. What I meant by GUI is the User Interface, i.e. using cornerstone instead of writing media queries. Does cornerstone allow me to specify the column and row template for a cell for each breakpoint or do I have to write the queries?

Thanks

[prakash_s]

Hello @kgpthemex,

You can place the Grid element cells for the breakpoints without using media query CSS. Please have a look at our video tutorial of the Grid element.

CSS Grid: Auto-Responsive Cells (Intermediate)

Check out more tutorial videos on our Youtube Channel.

Thanks

[kgpthemex]

@prakash_s,

Thank you for the reply. I actually need a bit more control since I’m creating a grid layout that fills the viewport.

I would like to adjust the column template based on breakpoints. I don’t have the breakpoint control for the cell layout that show in the video. Please see the comparison below.

Thanks

Cell Layout with Breakpoints in the video:

Cell Layout in my Cornerstone:

[friech]

Hi @kgpthemex,

Sorry for the confusion, the KB was not updated. On the latest version because of the new Responsive Styles feature the Layout configuration per breakpoint is moved.

You can now access the Layout configuration or Responsive Styles control by clicking on the control’s label

https://prnt.sc/1roltnb

https://prnt.sc/1rom1gq

More details about Responsive Styles on the following link:

How to Set Responsive Styles for Elements in Cornerstone

Hope it helps,
Cheers!

[kgpthemex]

@friech,

Thank you so much! That was it. I see what you guys did there. It would have been hard for me to find it.

That’s what I needed.

Thanks again!

[friech]

We are delighted to assist you with this.

Cheers!