Media Query in Qury Loop

Hi there,

Can you show me the entire CSS generated by the global style？

And can you link me to the page in question?

Grid block has another container that’s invisible in the editor, so you are actually adding the class av-wine__grid to each column’s inner container instead of the column itself, that’s why it won’t work.

You will need this CSS:

@media (max-width:767px) and (min-width:400px) {
.gb-grid-column.gb-query-loop-item:has(.av-wine__grid) {
    width: 50%;
}
}

In GB 2.0 (still in the alpha stage), the Grid block will be simplified, and it uses CSS grid instead of flexbox, you will be able to use global style to control the grid items.

If the site is still under development, I would suggest give the GB 2.0 alpha a try.

Hi there,

in the block settings you can add extra media queries in the blocks setting – see here:

https://app.screencast.com/DFTXZWX8jesST

Just add NEW, and add you query ie. @media (max-width:767px) and (min-width:400px)
Then you can apply styles to that block ( or global style ) for that specific media query size

Here’s the basic knowledge of Grid CSS:
https://css-tricks.com/snippets/css/complete-guide-grid/

And here’s a video:https://youtu.be/sNfussCGsNI?si=pw6IdC6RcmvF8j8d

Once you read the article above and watched the video, you should have a rough idea about Grid CSS.

To set the Grid items to be two columns, you just need to select the Grid block, go to the Grid layout panel, and select the two-column layout. It will automatically fill the field with repeat(2, min-max (0, 1fr)).

Here’s a screenshot for your reference:
https://app.screencast.com/FEHLyyCrNsUAX

No Problem 🙂