Adjust width of columns

Ask the Community Customization
1

At times the columns can be long an thin when there is space on the page to widen them. It would be helpful if we could do this.

1 Like
3

Hi there @James_Bohan-Pitt and welcome aboard :wave:

Your request is with our devs now. I’ll report back once the solution is provided :slightly_smiling_face:

1 Like
4

This code should help:

.eapps-pricing-table-column {
  max-width: 360px;
  flex-basis: 360px;
  margin: 0 15px;
}

max-width is the maximum width of the columns

flex-basis value should be the same as max-width

margin allows you to set the spacing between columns (change only the 2nd number).

Add this code to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

5

OUTSTANDING! Check this out! Thank you! One thing I cannot get to work is getting the images to fill the columns. All are 3:2 resolution. Is there a trick to it? Do I need to reduce the width a little? Or can I pusn the images full width somehow?

Wider version - Facials | Best Facial Near Me — Glow Up Studio Dallas

Standard versions - Save 50% on Full Set Lash Extensions | Eyelash Extensions Near Me — Glow Up Studio Dallas

1 Like
6

Hi @James_Bohan-Pitt :wave:

Please add this script to your page next to the widget’s installation code and let me know if it helped:

<script>
const LISTEN_TYPES = {
	one: {
		select: (selector, root) => root.querySelector(selector),
		validate: (node) => !!node,
	},
	all: {
		select: (selector, root) => root.querySelectorAll(selector),
		validate: (node) => node?.length > 0,
	},
};
function listenStep(args) {
	args.node = args.select(args.selector, args.root);
	if (!args.validate(args.node)) {
		args.step++;
		if (args.step < args.limit)
			setTimeout(() => {
				listenStep(args);
			}, args.delay);
		else args.reject();
	} else {
		args.resolve(args.node);
	}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
	const args = {
		root: document,
		node: undefined,
		selector,
		delay: 100,
		limit: 50,
		step: 0,
		select: LISTEN_TYPES[type].select,
		validate: LISTEN_TYPES[type].validate,
		...customArgs,
	};
	if (type === 'one' || type === 'all') {
		return new Promise((resolve, reject) => {
			listenStep({ ...args, resolve, reject });
		});
	}
}

asyncListenFor('.eapps-pricing-table-column-picture-container').then(() => {
	const resizeEvent = new Event('resize');
	window.dispatchEvent(resizeEvent);
});
</script>
7

OUTSTANDING again! Check it! LOVING this! Thank you!

Next step to find a way to change my horizontal tables (Brow Lamination | Best Brow Lamination Near Me — Glow Up Studio Dallas). Is there a widget for these?

2 Likes
8

Amazing!

By the way, we’ve just launched a Birthday Contest where you can win a 1-year extension to your subscription. Feel free to check the details and participate :wink: