[Resolved] Whitespace around Toolset rows

[Author]

Posts

[AlexanderN4266]

Hi, when I insert rows using Toolset template designer there is a lot of whitespace on four sides of the block.
I tried to add a custom ID and then some CSS to Toolset Layout CSS and JS
/*Layouts css goes here*/
#revslider-single-book {
margin: 0;
padding: 0;
}

But it didn't make a single change on front-end.

[Luo Yang]

Hello,

It seems to be a CSS problem, please share the live problem URL, I need to test it in my Chrome browser, thanks

[AlexanderN4266]

The problem page: hidden link
And I could send you over the whole style.css file, if necessary.

[AlexanderN4266]

Hi, could you have a look at the problem, please?

[Minesh]

Luo is on holiday today. He will get in touch with you as soon as he will get back to work.

[Luo Yang]

Sorry for the delay answer, I have checked the URL you mentioned above, but can not see any HTML element is using ID "revslider-single-book", see screenshot revslider-single-book.JPG

Where and how do I see the the problem you mentioned above: whitespace on four sides of the block?

Please take a screenshot for it, thanks

[AlexanderN4266]

Hi, sorry for misunderstanding. I was trying to figure it ot these days.
I am talking about white space which is most likely caused by Bootstrap's container-fluid. Bootstrap includes padding-bottom of about 15 to 30px.
image 19.png shows white space below the tabs clearly indicating the issue with container-fluid.
In case with image 14.png, container-fluid goes along with no-padding insert (and I don't now how to modify Bootsrap code within Toolset editor at all!!! - so I actually don't know how it got there and corrected the problem, partly though), the rest of the problem is with the white space on the left of the slider.

Additionally, the same plugin shortcode is used in the footer, as shown on the main page hidden link where there is no whitespace, as needed, and naturally I was not using Bootstrap there. Though, I may be wrong.
I hope I managed to get it as clear as possible this time. Please take a look. Thanks.

[Luo Yang]

Thanks for the details:
Q1) image 19.png
The extra margin CSS codes are from your CSS file
hidden link

.su-tabs {
    margin: 0 0 1.5em;
...
}

Disable it can fix the problem, see screenshot margin1.JPG

Q2) container-fluid goes along with no-padding insert (and I don't now how to modify Bootsrap code within Toolset editor at all
Please check Q1, the margin/padding styles are from your theme files, you might consider remove them or setup CSS codes to override them, you don't need to modify(hack) Bootstrap codes.
For example:

.su-tabs {
    margin: 0 !important;
}

[AlexanderN4266]

Hi, the issue with the tabs display was just as you mentioned. Thank you very much.
As for the whitespace on the left of the footer image, the problem stays the same.

Version 1:
The situation with CSS insert modifing the Bootstrap row (the way you mentioned is NOT right to do) - the image is #1
/*Layouts css goes here*/
/*gets the whitespace off the Bootstrap fluid container, esp on its sides*/
div.container-fluid {
padding: 0;
margin 0;
}
The situation when I deleted the above CSS, just adds more whitespace on the sides - Image #2

THE HOMEPAGE
The situation with the image is a little tricky.
I use Slider Revolution plugin to build the footer. On the homepage it is displayed properly. To build homepage, I used Elementor builder to create 4 columns -- for my single footer image consists of four one-image Revolution sliders inserted in four Elementor colums. It is displayed fine there, as on any other page build with Elementor. That's all with it.
THE PROBLEM PAGE
The situation with this one is that I use the very same four Revolution slider images but now inserted in in four Bootstrap columns created with help of Toolset editor, and it gave this final whitespace on the left. I don't quite find the solution, most of what I change in css just breaks my previous work and not correcting this issue at all.
Could you give me a hand?

[Luo Yang]

I have tried both URLs you metnioned above:
hidden link
hidden link
But don't see any left padding/margin as your screenshot.

See my screenshot left.JPG

Is this problem resolved? if there is something missing, please provide detail steps to see the problem as you mentioned above:
whitespace on the left of the footer image

[AlexanderN4266]

My issue is resolved now. Thank you!