Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Incorrect column gutters

Featured Lock Resolved Bug
Hi.
This is an issue that was present in SPPB 2 and is still present in v3.

Column gutters are supposed to only be present in inner spaces between columns, not on the far right column aligned with the main container.

Lets say we have 3 columns. Gutters are supposed to be present between columns 1&2, 2&3. Left edge of column 1 is supposed to be aligned with left edge the container and right edge is supposed to be aligned with right edge of the container.

What SPPB is doing right now is adding gutter on the right side of column 3, which results in unwanted space between column 3 and the container. Column 1 is properly aligned to left edge of container.

The correct formula for the number of gutters is: gutters= total # of columns - 1.

Can you please fix this?

Thank you.

10 Answers

Hello Goranche,

I have checked your site. It's perfectly aligned. Please note it. We use Bootstrap so we follow bootstrap rules. Checkout bootstrap gird. Our grid and Bootstrap Grid are the same structure.

Thanks


Hi Raju,
thanks for taking the time to look into it.

However, I am afraid that you did not look at the correct thing. The gutter is definitely not properly aligned and I am including a screenshot, so you can see clearly what i am talking about. Remember, it is the RIGHT side that doesn't align, not the left! You were looking at the left side.

As you will see from my screenshot, there is an additional space on the right as the inspector tool clearly demonstrates. The pictures on the RIGHT are supposed to be aligned with the orange button in the header, but they are not.

[attachment]extra-gutter.jpg[/attachment]


I have already replied you from PM. You have used wrong way. Turn off Remove Gutter from the main section. remove this CSS code.


.sppb-row {
width: 100% !important;
}

Attachments (1)

  • Screen Shot 2017-12-01 at 12.56.18 PM.png
    Screen Shot 2017-12-01 at 12.56.18 PM.png 122.5 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
Hi,
thanks for explanation with details.
Yes, we had plans to improve this area in next SPPB 3.x update.
Great! I am happy to hear that. Looking forward to the next update. Thank you.
Hi,

We follow the bootstrap grid system. If you use the .sppb-row class as a wrapper of columns, everything will be fine.

Thank you

Goranche

One week ago #Permalink
Hi. I haven't changed the wrapper for columns. It is .sppb-row and it is not fine by no means. There is an extra space on the far right of the row. It is just not working as it should.

Can you please get it fixed in the next update?

Thank you.
Hi. I haven't changed the wrapper for columns. It is .sppb-row and it is not fine by no means. There is an extra space on the far right of the row. It is just not working as it should.

Can you please get it fixed in the next update?

Thank you.


Hello,

I need to see the problem. Can you give me link where you found issue?

Thanks
Hello Goranche,

I have checked your site. It's perfectly aligned. Please note it. We use Bootstrap so we follow bootstrap rules. Checkout bootstrap gird. Our grid and Bootstrap Grid are the same structure.

Thanks

Goranche

One week ago #Permalink
Hello Goranche,

I have checked your site. It's perfectly aligned. Please note it. We use Bootstrap so we follow bootstrap rules. Checkout bootstrap gird. Our grid and Bootstrap Grid are the same structure.

Thanks


Hi Raju,
thanks for taking the time to look into it.

However, I am afraid that you did not look at the correct thing. The gutter is definitely not properly aligned and I am including a screenshot, so you can see clearly what i am talking about. Remember, it is the RIGHT side that doesn't align, not the left! You were looking at the left side.

As you will see from my screenshot, there is an additional space on the right as the inspector tool clearly demonstrates. The pictures on the RIGHT are supposed to be aligned with the orange button in the header, but they are not.

extra-gutter.jpg

Attachments (1)

  • extra-gutter.jpg
    extra-gutter.jpg 247 KB

Goranche

One week ago #Permalink
Thank you, Raju.

You were right. Removing the CSS code fixed the issue. I really appreciate your help!

Thank you.
Goran


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 142
Toufiq

Toufiq

Total Accepted Answers: 48
Shibbir

Shibbir

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Rodrigo Corbata

Rodrigo Corbata

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam