Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: capture2

Tablet:

capture

Issue Analytics

State:
Created 6 years ago
Comments:5

Top GitHub Comments

2reactions

GuacheSuedecommented, Jan 26, 2018

#6109

1reaction

stale[bot]commented, Apr 27, 2018

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.