thanks David,
I believe I made the changes and it is better, but still not 100%. Would you take another look please?

Thank you so much.

The problem is caused by each product box being set to 49% width while the Ecommerce Templates option fields retain wider sizing. The dropdown then overflows its product box.

Add this CSS immediately after the existing div.product rules:

/* Keep product options inside each product box */
div.product {
width: 49%;
min-width: 0;
box-sizing: border-box;
}

div.product .optioncontainer {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;
}

div.product .optiontext,
div.product .option {
width: auto;
min-width: 0;
box-sizing: border-box;
}

div.product select.prodoption,
div.product input[type="text"].prodoption {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}

@media screen and (max-width: 800px) {
div.product {
width: 99%;
}
}

Your complete existing inline section would become:

<style type="text/css">
div.category {
width: 49%;
}

div.product {
width: 49%;
min-width: 0;
box-sizing: border-box;
}

div.product .optioncontainer {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;
}

div.product .optiontext,
div.product .option {
width: auto;
min-width: 0;
box-sizing: border-box;
}

div.product select.prodoption,
div.product input[type="text"].prodoption {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}

@media screen and (max-width: 800px) {
div.category,
div.product {
width: 99%;
}
}
</style>

This keeps the labels on the left and makes every “Please Select…” dropdown shrink to the available space inside its product box. No changes to the generated product HTML are needed.

Patrick

Thank you Patrick,

I did add it to the test page and it solved beautifully! However seems like a lot of code for the page. Is there another way? Can I add it to one of the .css files?

Hi, it will work just the same in the stylesheet, but since this os for the product page only, I would leave it there.
That is a very small amount of css and it will not slow your pages at all.
If you want to shorten it you can remove the spaces and each entry can be on it's own line
for example
div.product .optiontext, div.product .option {width: auto; min-width: 0; box-sizing: border-box; }

Thanks,
David

Thank you David, and Patrick!