[Resolved] Different bootstrap columns size at the Toolset Layouts

[Author]

Posts

[Serhii]

Hi, I am using the Toolset Layouts to build my online casino review page

Example - hidden link

I have the section "Platforms", where I check actual platforms for a current casino - hidden link

On the example of this section (Platforms), I will describe my issue.

Exists 6 columns - hidden link they all should be the same width, but in my case, the first and the last columns are bigger than others.

Screenshot front-end - hidden link
Screenshot back-end - hidden link

And I do not understand why. I tried to change page width, at this moment it is 1260px, I tried 1170px and the same result - first and last columns are bigger than others.

I tried to clean all CSS code - no result.

Please help detect and fix this issue.

[Luo Yang]

Hello,

Thanks for the details, those 6 columns are in same width (205 px each) actually.

But in Layouts CSS file
hidden link
line 67 will setup the first column as no left padding:

.ddl-full-width-row>[class*="col-"]:last-child {
    padding-right: 0;
}

Line 70 will setup the last column as no right padding:

.ddl-full-width-row>[class*="col-"]:last-child {
    padding-right: 0;
}

In your case, you can setup custom CSS codes to override them, for example, edit the layout
1) hidden link
Edit "Row 3", add a CSS class name "my-row",

2) Dashboard-> Toolset-> Редактор CSS и JS Layouts
hidden link
Add below CSS codes:

.my-row div.col-sm-2{
 padding: 5px;
}

Please test again, check if it is fixed, thanks

[Serhii]

My issue is resolved now. Thank you!