Hi,
take a look at this page
Yarn | The Craft Circle
First the 2 "Silk garden"product boxes on the left.
I have set a min height for the title in each product box so 1 line or 2 occupies the same space. This makes the select drop downs line up.
The next box over “Tekapo Teal” has no select drop down.
How can I make the Quantity label and field, Price and add to cart button etc all line up with the ones in the first 2 product boxes?
Hope someone can help
I notice your form on the last item doesn’t have any height of its own. Its size is apparently completely determined by the div with the dropdown.
I suppose the “easy” way out, since this surely comes out of some template logic, is to have the div and p who hold the colour dropdown still appear in the HTML, but be empty. Empty elements should be ignored by anything looking at content, and their semantics shouldn’t exist since there’s nothing inside them.
However that is rather bloaty solution.
The other solution still probably involves logic on the backend, but it’ll depend on your form having some height.
You could say something like
If !colourSelect in theForm
form gets another (additional) class
formClass {
padding-top: equal to the height you’re getting from the div and p with the colour dropdown;
}
That padding would then theoretically take up the same room as the colour select dropdown does in other forms.
On my machine the Add to Cart buttons don’t line up because the first two have
price from (someprice)
while the last one only has
price (someprice)
They may not be wrapping on your machine, but they do on mine (I have slightly larger fonts than average). If you care a lot about this area lining up too you could always force the price text under the input.
In a Magento setup once we just used absolute positioning to hold the Add to cart button to the bottom of some min-height li’s (which took the job of you productdisplay divs). That way, whether content wrapped above the add to cart button or not didn’t matter.
But absolute positioning is kind of brittle.