Help with some weird padding!
As far as I can see, each “block of information” on this page is built the same way – http://bit.ly/2Sdr3Jp.
But the padding before the buttons varies from block to block. Can anyone explain why that should be?
What I’d like is the button to sit in the same position relative to the preceding paragraph. Some gaps, however, are wider than others…
Looks like you have a 2 column stack with the paragraph on the one side and the quote on the other. You then have a spacer stack followed by the button.
So if the quote is taller than the paragraph the button gets pushed further down.
Perhaps you could put the spacer and the button into the left column under the paragraph. That would have it an equal distance from the paragraph. However, on mobile it will be between the paragraph and quote.
Indeed. I just swapped from the situation you mention because of the button coming before the quotation when on a mobile. Is there any way to solve that issue?
Not sure what look you want. With the standard column stacks that come with stacks you are going to be limited.
It’s not really the look here, though, that is holding it back? It’s just behaviour in a certain context. Is there no way to “force” the quote into a certain position? I can live with the default behaviour, but it would be much better to finish the item and then have a “buy” button at the bottom… Any ideas?
I would probably use something like @Doobox’s Grid stack. I would set it as 3 columns (Paragraph, Quote, and Button). I would then set the grid to use two columns on everything but mobile.
The button would always be in the row by itself. You could then play around with the Vertical alignment or Equalizer option.
Thanks for that. I’ve got it although I do find it hard to align the button to the middle block so it’s not live yet. Button in a row? A normal row, or another one of blocks?
Not knowing what look you are looking for it’s kinda hard to say.
Your site looks like you have a two-column stack with the left side being a lightbox with the image stack.
The right column in the outer two-column stack contains a new two-column stack.
This inner two-column stack is the one I suggested you replace with the Grid Stack.
So if you want the button always to be centered below the "description AND Quote, then place it outside the newly replaced two-column inner grid. It will be in the second column of the outer grid below the two-column.
If you want the button two to be on the right side under the Description, then I’d add a new Grid item in the Grid stack. It now would have a third grid item with the button. You would still leave the Grid set to two Columns for everything but Mobile:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
