Hi. I have been hand coding my websites up to now, and am having a little trouble adjusting to using Pinegrow for some things (…plus, I’m also now using features I previously was not using, not aware of, or outright avoiding!). So, I’m currently battling both learning all aspects of the interface as well as the CSS/Bootstrap features themselves.
So, one thing that seems to often slam me to a screeching halt, is certain aspects of positioning.
An example… I have a 2 column setup (using a container, holding a row, holding two columns, each wtih an image). The first image is (say) 400x400, and the second is 200x100.
I can set all that up, and the result is two columns, with the second column’s image sitting at the top of the space (as if aligned to the top).
I have been trying to get that 200x100 image to position into the center of the space, but seemingly EVERYTHING I have tried has no result. Admittingly, I’ve always struggled with positioning/alignment… where it seems the results are almost random, sometimes working, other times having no effect).
I have tried a number of things in the visual editor… the ‘vertical alignment’ attribute, the Position attibutes, etc… for the image element itself, for the column that contains it, etc. I just can’t seem to figure out what is the correct element to apply the change to, nor what method I should be using.
I thought, perhaps, that the containing partent was automatically sized to the dimensions of the image, so that (as a result) the image had nowhere to actually move… so, I gave the containing parent a specific (large) height, giving the image space to move around… but still, no attribute adjustment seemed to cause the image to move from it’s top-aligned position.
So, I’m a bit stumped… Can anyone point me in the right direction?
Again, my setup was:
Container
Row
Column1
Div (…I tried it without the containing Divs as well)
Image1 (400x400)
Column2
Div
Image2 (200x100)
(…Ya, I closed all the tags and stuff. This is just a simplified outline of the tree)
And, again, I’m wondering how to position the second (smaller) image within the containing column (ex. vertically center it).
The only way I eventually managed to get it to actually move, was to apply a top padding… but I wasn’t sure if this was the proper way to do it (…I wasn’t sure if setting a fixed, pixel based distance down would be an issue when it, and the larger image beside it got scaled down for smaller screens… although, I suppose I could customize the top move amount for each break point?)
