Skip Navigation

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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 7 replies, has 2 voices.

Last updated by WeiS2074 1 month, 3 weeks ago.

Assigned support staff: Waqar.

Author
Posts
#1712163

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?

#1712355

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

#1712571

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?

#1713645

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 )

#1714613

My issue is resolved now. Thank you!

#1714797

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%;
}
}

#1717009

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/

#1722871

Thank you!