Semantic-ui: [Grid] - Buttons overlapping each other inside a column on resize

[abhigyantiwari]

Expected
There should be space between buttons

Result
Buttons start to overlap after browser resize

Testcase
Applied stackable, relaxed grid classes. Didn't help.

Here is my code...

<div class="ui stackable grid">
        <div class="ui three column row">
            <div class="column"></div>
            <div class="column">
                <h1 style="color: white; font-family: 'Dosis', sans-serif;">You are..</h1>
                <div class="ui relaxed grid">
                    <div class="four column row">
                        <div class="column"><a href="" class="ui green button">Teacher</a></div>
                        <div class="column"><a href="" class="ui green button">Parent</a></div>
                        <div class="column"><a href="" class="ui green button">Principal</a></div>
                        <div class="column"><a href="" class="ui green button">Student</a></div>
                    </div>
                </div>
            </div>
            <div class="column"></div>
        </div>
    </div>

Laptop:

Tablet:

[abhigyantiwari]

Pls Haaalp!

[GuacheSuede]

6109

[abhigyantiwari]

Let's hope it's true that they are working on V3 as mentioned in ticket you provided! 💯

[GuacheSuede]

@abhigyantiwari Doubt so, because they are struggling to find funding

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.