[Resolved] 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.

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.

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;
	}

}