Responsive Design

show in breakpoint only

.ts-show-mobile-only

.ts-show-tablet-only

.ts-show-desktop-only

hide in breakpoint only

.ts-hide-mobile-only

.ts-hide-tablet-only

.ts-hide-desktop-only

show in breakpoint and up

.ts-show-mobile

.ts-show-tablet

.ts-show-desktop

hide in breakpoint and up

.ts-hide-mobile

.ts-hide-tablet

.ts-hide-desktop

Try resizing the page and see which of the boxes below are shown.

Find the current breakpoint

The current breakpoint is determined via CSS classnames on the html element. You can use a function such as this to lookup the current breakpoint (CSS classname).

function breakpoint() {
	return ['ts-mobile-only', 'ts-tablet-only', 'ts-desktop-only'].find(c =>
		document.documentElement.classList.contains(c)
	);
}

Observing the breakpoint

You can setup an event listener for ts-breakpoint to get notified whenever the breakpoint changes. Again, the current breakpoint is determined via CSS classes.

document.addEventListener('ts-breakpoint', function() {
	console.log(breakpoint()); // see above
});