Mobile hacks: CSS, JavaScript

Request is to center a div content within a widget (embedded html+javascript+css) into a large website.

From this

to this on mobile devices


The JavaScript injected code would need to be placed in a <script></script> block.  Suggested the JavaScript injection as CSS can be tricky when multiple styles are compounded and order of application is important ( the cascading part) whereas JavaScript is direct and malleable to whatever you would like to achieve.

Resize Document Object Model element by JavaScript resize event listener

window.addEventListener('resize', (event) => {

	let targetElement = $('.your-class-you-are-targeting').get().shift();
	if (targetElement == null) {
		console.log('unable to select');

	if (window.innerWidth < 768) { = "flex"; = "center";
	else { = null;	

Cascading Style Sheet manipulation by width is easier if you are comfortable with it

@media screen and (max-width: 767px)
        display: flex;
        justify-content: center;