Changing css classes based on screen size

[grobiwebdesign]

I'm looking to tidy a CTA section (made in bulma css) by having Alpine.JS change the class names depending on screen size. I would like the text and button to center-align themselves on mobile screens.

What I've got is this, and I need help:

<div class="title is-ancestor">
	<div class="tile is-parent" x-init:resize.window="onMobile = (window.innerWidth < 1024) ? true : false => { $el.classList.add('has-text-center') };" x-data="on-mobile">
		<div class="tile is-child has-text-left"  x-init="(onMobile) => { $el.classList.remove('has-text-left') }">
			<h1 class="is-title">Statement</h1>
		</div>

		<div class="tile is-child has-text-right" x-init="(onMobile) => { $el.classList.remove('has-text-right') }">
			<button class="button yellow is-large">Call to Action</button>
		</div>
	</div>
</div>

[ekwoka]

You should just use CSS for this. https://developer.mozilla.org/en-US/docs/Glossary/Media_query

Baring some particularly wild situations, this should always be css.

But if you must, you can use @newthink/ui or just steal copy the source https://github.com/ekwoka/newthink-ui/blob/main/src/magics/screen.ts for $screen as a way to handle reactive media changes.

But you should do this in CSS, not in JS.

[sejutaimpian]

A little tip: AlpineJS now has Resize Plugin