Adjust Text / Drop Down Position Within Add-on Container

[APEX86]

Hi guys,

I used some custom code and meta objects to add product add-ons to specific product pages:

https://apex86.net/products/complete-minimalist-filtration-system

I’m hoping to optimize the layout to recover some vertical real estate, going from:

To:

Or even:

[moshbray]

The issue shown in the image is caused by the current layout placing each product add-on (title, price, and select option) in separate vertical blocks, leading to excessive vertical space usage on the product page. This happens due to the use of block-level elements and default CSS styling. To fix it, you should restructure the HTML using a horizontal layout with Flexbox, which aligns the add-on label, price, and dropdown in a single row, minimizing vertical space and creating a cleaner, more compact display.

[tim_1]

Try this CSS:

.ref_name strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ref_name select {
  align-content: center;
  flex: 1 1 max-content;
}

[APEX86]

Tim, many thanks!

I am pretty tech savvy, but CSS is very new to me. I put your code into the custom CSS field for the product page and it definitely helped! For some reason only one of the drop-downs changed. Any ideas? I’m guessing that it could have to do with the length of the text in that drop-down being longer, causing an overflow and the line to wrap. Is that right?

[tim_1]

Yes, the first drop-down options are too long. However, if it fits, then it will be on the same line:

You can limit the select width, though:

.ref_name select option {
  max-width: 25em;
}

.ref_name .price-block {
  margin: 0 auto 0 0;
}

(The second rule here is to align selects to the right when everything is on one line)

[APEX86]

Thank you again Tim.

The “custom CSS” field in the “customization” editor, is really giving me fits. It is constantly refreshing the page while I try to type, which makes it nearly impossible to edit CSS there. If I prepare the code in notepad and paste it over, it takes effect (and no syntax errors shown) but the save icon is greyed out, so I can’t push the changes. Any idea on that? I tried clearing all site data, and even working in an incognito window.

When I add both of your code snippets:

.ref_name strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ref_name select {
  align-content: center;
  flex: 1 1 max-content;
}
.ref_name select option {
  max-width: 25em;
}
.ref_name .price-block {
  margin: 0 auto 0 0;
}

I get this result:

So, I must be doing something wrong. With some small changes to the first 2 blocks:

.ref_name strong {
  display: flex;
  align-items: center;
  gap: 1 rem;
  font-size: 11px;
}
.ref_name select {
  align-content: center;
  flex: 1 1 max-content;
  font-size: 11px;
}

I get this:

So, plenty of room for everything. But, obviously not spaced well. I tried a few more changes, but have not found success yet.

[tim_1]

gap: 1 rem;

There must be no space between number and unit – “1rem”, not “1 rem”.

Not quite sure why you can’t save the “Custom CSS”, try this code where I’ve combined some rules:

.ref_name strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ref_name select {
  align-content: center;
  flex: 1 1 max-content;
  max-width: 25em;
}
.ref_name .price-block {
  margin: 0 auto 0 0;
}

I’d rather keep flex-wrap: wrap, otherwise it gets too crowded on some screen widths.

I frankly, almost never type into “Custom CSS” – it’s too narrow for most of the codes, so I write code in text editor and paste into “Custom CSS”.

[APEX86]

You are a wizard Tim, thank you much!

Your code seems to work very well now. But, shopify still won’t let me save the change. So odd!