[Resolved] HTML/CSS formating – spacing issue

[Author]

Posts

[andreasK-15]

Tell us what you are trying to do?
I'm trying to replicate a section from the following website (see also attached screenshot no.1): hidden link

I need help with the following:
- Spacing below text sections. I'm using the "fields and text" block and edited the HTML (here is an example: <p style="color: black; font-size: 80px; line-height: 80px;">[types field='artificial-snow-coverage'][/types]%</p>)
For some reason, the space below the text bock increases the larger the font-size is and I can't control it with line-hight. Is there a simple way to control the space below text elements, so I can reduce the space in the middle row of my version of the Apple section?

To replicate the style on the Apple page, I used borders in the grid cells. This also shows borders on the outer edges. Is there a way to control borders individually (e.g. hide the outer borders on the left and right of my section?

Is there any documentation that you are following?
I'm following the standard Toolset documentation.

Is there a similar example that we can see?
Here is how far I got so far (see also screenshot no.2): hidden link

What is the link to your site?
hidden link

Thanks in advance for your help!

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I can see that the issue is coming from the CSS coming from the theme:
=> hidden link

p {margin-bottom: 1.75em; }

Could you please try to add the following CSS code to your content template or view's CSS box:

.tb-fields-and-text p {
    margin-bottom: 5px !important;
}

I hope the solution I shared above will help you to resolve your issue.

[andreasK-15]

Thanks Minesh, the CSS code solved the spacing issue.

Regarding the borders in the grid cells. Currently this also shows borders on the outer edges. Is there a way to control borders individually (e.g. hide the outer borders on the left and right of my section? Could that be controlled by CSS as well? If so could you please assist? Or is there a better way to do this via some block settings?

Many thanks and kind regards, Andreas

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can you please try to select the "View Loop" and then on right sidebar you will see a tab "Style Setting" and within the "Style Setting tab" you will see the border settings. Where it will allow you to control left, right, top, bottom borders. Please check the following screenshot:
=> hidden link

Can you please check if that helps you to resolve your issue.