Variations won’t align to center on product page

Hi George

Thanks for reaching out.

Please, send a link to an existing product and I’ll take a look at what you’ve done so far.

This reply has been marked as private.

Thanks, variations are contained in an HTML table. I’m not sure that there is an easy way to achieve what you’re after here. If you right-click and inspect element and take a look at how the table is constructed, it’ll help to understand what’s going on there.

The following will center align the text within each table cell:

.single-product .variations tr {
	text-align: center;
}

Alternatively, the following will center align the second table cell but right align the first table cell, probably better for what you’re trying to do:

.single-product .variations tr {
	text-align: center;
}

.single-product .variations tr .label {
	text-align: right;
}

—

Polestar is loading both the min and non-min stylesheet which isn’t correct. I’m not quite sure that’s happening. Go to Dashboard > Updates, there should be a theme update pending. If so, try updating to see if that issue resolves. I can check once you’ve updated.

Hey Andrew,

I’ve updated the theme and added the code you provided. The result can be seen on the link I sent. It is better than before but not best.

I basically need to apply this on the mobile version of my website. Is there a way to implement it only on mobile and leave it as it is for desktop?

Sure, you could wrap the rule in a media query:

@media (max-width: 768px) {

	.single-product .variations tr {
		text-align: center;
	}

	.single-product .variations tr .label {
		text-align: right;
	}

}

Hi Andrew,

Thank you, that’s what I was looking for 🙂

This reply has been marked as private.

Glad to hear you’re making progress 🙂

.bk-social-proof-embed .social-proof-widget.widget-balance {
	justify-content: center;
}

Worked like a charm. You’re awesome ?

Super 🙂 Glad that helped.