Adjusting height of size grid boxes on product page — Dawn 15.4.0

Shopify Discussion
1

Hi everyone,

I’m using Dawn theme v15.4.0 on my live product page. I used some custom CSS to make the variant size option boxes bigger, and it worked however, it caused the size text inside the boxes to sit too high (not visually centered), which looks off.

Here’s the code I used:

.product-form__input input[type="radio"] + label {
  min-height: 52px; /* adjust height */
  min-width: 52px;  /* adjust width if you want square */
  font-size: 16px;  /* optional */
  display: flex;
  align-items: center;
  justify-content: center;
}

Does anyone know what CSS I can add to push the size text down slightly so it appears centred vertically inside the box?

Thanks!

Website: crepscity.com

6

Hi gary,

Thanks for the help your suggestion definitely pointed me in the right direction!

I added your CSS and it helped remove the padding that was causing the text to sit high. After testing a bit, I tweaked the padding and line height values to better match the layout on my store. Here’s the final version I’m using now:

.product-form__input input[type="radio"] + label {
  min-height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5 !important;
  padding-bottom: 0 !important;
  line-height: 2 !important;
}

This centred things much better for my setup, so thanks again for the direction!