[Resolved] Display fix gap between 2 custom fields in a block

[Author]

Posts

[WeiS2074]

Hi,

I am creating a content template for the archive. I create a Grid with two columns, I insert 2 custom fields in there. To the width of the gap between 2 fields are dynamic, it will stretch while you widen the browser. Can we make the gap to be fixed width?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thanks for asking! I'd be happy to help.

Although there is no built-in feature available to assign a fixed or maximum width to the grid or its column blocks, you can use some custom CSS code, to assign a maximum width value to the grid container for those two fields, so that they stay closer to each other, on all screen sizes:

@media only screen and (min-width: 782px) {
.wpv-block-loop-item .wp-block-toolset-ct > .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:nth-of-type(2) .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column > .wp-block-toolset-blocks-grid:nth-of-type(1) {
max-width: 85%;
}
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[WeiS2074]

Thanks Waqar. It works. Can you tell me where do I find nth-of-type(1) and (2)?
I inspect the screen element. I only can find up to wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column
I want to learn and do another gap by myself.

What do I need to change to move this css to the "code snippet" plugin?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and glad that it works.

The "nth-of-type" is a pseudo-class selector, which can be used to target a particular element with respect to its position/order, among a group of siblings.

Here are some useful resources on the topic:
hidden link
hidden link
hidden link

The custom CSS code can be placed within the "<style> ... </style>" tags, when using the ""code snippet" plugin.
( you can refer to the existing example snippet "Example CSS snippet" - hidden link )

[WeiS2074]

My issue is resolved now. Thank you!

[WeiS2074]

Sorry to have to ask you again. I tried by myself, it doesn't work.

last time you shink the first grid gap. I tried to follow the pattern and do the second and third gap. but it doesn't work. these 3 grid has the same name class="wp-block-toolset-blocks-grid tb-grid". So I use the following code by just changing the nth-of-type number, but doesn't work. What is wrong with my code? How do I get these 3 grids reducing the gap?

@media only screen {
.wpv-block-loop-item .wp-block-toolset-ct > .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:nth-of-type(4)
.wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column > .wp-block-toolset-blocks-grid:nth-of-type(3) {
max-width: 85%;
}
}

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

I'm afraid, to be able to efficiently customize the CSS code on your own, you'll have to get familiar with a different type of CSS selectors:
hidden link

If you're interested in learning about CSS code changes in general, this tutorial from W3Schools will prove very useful:
hidden link

In case, you'd like to control the maximum width of those 3 rows of the grid container, independently, you can update the code that I sent earlier, to:

@media only screen and (min-width: 782px) {
.wpv-block-loop-item .wp-block-toolset-ct > .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:nth-of-type(2) .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column > .wp-block-toolset-blocks-grid:nth-of-type(1) {
    max-width: 85%;
}

.wpv-block-loop-item .wp-block-toolset-ct > .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:nth-of-type(2) .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column > .wp-block-toolset-blocks-grid:nth-of-type(2) {
    max-width: 40%;
}

.wpv-block-loop-item .wp-block-toolset-ct > .wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:nth-of-type(2) .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column > .wp-block-toolset-blocks-grid:nth-of-type(3) {
    max-width: 100%;
}
}

Note: Each max-width value applies to each of those 3 rows and you can adjust those values to increase or decrease the vertical gap between the elements in each row.

As much as we would like to help, it won't be possible for us to continue on providing 1-1 custom code assistance. The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[WeiS2074]

Thank you!