How can I align the "size-option" variations of my products to the quantity boxes that are below?

Store Design
, ,
1

I’m trying to use CSS in Shopify to customise a specific product; the layout/arrangement of the class “size-option” variations, they come in age ranges, and therefore the text field is shorter than the quantity box below and they don’t line up (compared to small, medium, large, x-large where they naturally line up ok).

View of issue without CSS

I am having issues with the CSS where I cannot select the individual product as parent of the color-option class.

I have tried applying a text-align: justify as an initial rule to make the text span the width of the space available, but that didn’t work as intended… Nothing happened.

So I decided to attempt to use the padding and margin. I’ve found that this worked pretty well, not perfect but good enough to pass my needs. However this code applied to the whole sites product pages, and is currently unusable for my needs as I want it to only select either the product classes I say, or to a product tag (if possible)

My attempt to do this is as follows:

.product-8029862002921, .color-option, span { text-align: justify; padding-left: 15px;}
.product-8029862002921, .color-option { margin-left: -50px;}
.product-8029862002921, .three-eighths { margin-left: 50px; } 
.product-8029862002921, .color-box-wrapper { width: 75px; line-height: 18px; font-size: 14px; }

I presume the use of commas isn’t being used correct here, as I want to apply the first line style rules to the spans of color-option as a child of product-802986’. Shopify shows an error, that there are no span in color-option when I remove the commas from the css, but there definitely is, as seen when inspecting this in browser it shows the size variations in the colour option div as spans. See below code

<div class="bulk-order">
  
  <div class="size-option">
    
    <span> 1-2 </span>    
    
    <span> 3-4 </span>    
    
    <span> 5-6 </span>    
    
    <span> 7-8 </span>    
    
    <span> 9-11 </span>    
    
    <span> 12-13 </span>    
    
    <span> 14-15 </span>    
    
  </div>
</div>

Ideally I wanted to create a code that selects the product and color-option span to widen the gap between the sizes only for this product

I added margins to align them with the table of quanitity boxes below. Then needed to add another margin to the whole column three-eighths to return it back the 50px from .color-option { margin-left: -50px;

Without trying to select the parent class product-8029862002921

I had the section I’m trying to change looking pretty good, however, everything on the website also was effected, including the spans that hold the - and + buttons so ultimately now just need to isolate these css changes to just this product.

.color-option, span {
  text-align: justify;
  padding-left: 15px;
  white-space: nowrap;
}
.color-option {
  margin-left: -50px;
}
.three-eighths {
  margin-left: 50px;
}
.color-box-wrapper {
  width: 75px;
  line-height: 18px;
  font-size: 14px;
}

This makes the section I was working on good, but affects other things unintentionally across the whole of the site.

JWhincup_0-1676979715791.png
JWhincup_0-1676979715791.png566×591 14.8 KB

Note the numbers at the top line up with the boxes below.

However the text from the color info is affected by the white-space: nowrap intended for the coloroptions only. The comma is the mistake, but how to I replace this with something that isolates the things I need.

Thank you in advance for any assistance.

2

Hi @JWhincup

Maybe I suggest you use code below

.bulk-order {
	display: table;
}
.size-option span {
  padding-right: 10px;
  width: 47px;
  font-size: 11px;
}
.color-box-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-flow: nowrap;
	white-space: nowrap;
	font-size: 12px;
}