I need the form to be centred in the large circle, for all desktops and iPads/tablets.
However I cannot figure out how to move it.
It’s inside a div with the background image, both of which are in a single column full width container.
What am I missing?
Times like this I wish blocs had a ‘free move’ / ‘draggable’ option for placing elements but I know that goes against the concept of the app.
Presuming you want the form on the red background, you could add an extra column in and just make each column 6 wide rather than 12, I think! Not in Blocs atm, so can’t check.
Or, just thinking through, you may be able just to adjust the offset in the right panel to ‘0’, which would left align the form box column (or make it 6 (depending on how wide your column is) to right align the form box column).
Weird how you’d think I wanted it ‘outside’ of the large bubble that I would have thought clearly it should be inside - weird how brains work.
In the end, I changed the background graphic so the bubble was in the centre. It’s still annoying that I couldn’t move it over to the right enough.
not knowing how you’ve constructed it, it’s a bit difficult to diagnose, but I’ve just been in Blocs an hour or 2 ago testing what I said, and I was able to move my central form to left and right.
Not freely though. Only with the padding / margins options. The form was placed in a single full width horizontal row.
Think outside the box/ Instead of placing teh white circle as part of the background, place just the white circle as teh background of the element containing the form. Then the circle goes where ever the form goes.
That’s kinda smart - I don’t know how it would work with the smaller ‘dream bubbles’ but it could work. That didn’t occur as an option so thanks!
It will no doubt still be tricky, to make fully responsive. But thats the route I’d start with. For the circle (background “contain”).
You can use an svg icon “circle” for the background in an absolutely positioned div behind the form. It does get virtually impossible to do in iPhone as the form becomes taller than wide, so it simply will not fit in a circle.
on iPhone you’s just need to hide the circle div.
i would proceed similarly to @doobox, but perhaps set a background image for a column with a class. Columns with width, offset, and spacing can be aligned slightly for each breakpoint, and perhaps you can also get the small bubbles. You have to experiment, but it will certainly work somehow…
I did something similar for a form on a car as it was background image and set various positions of the car with 3 different pics as background on a class.
I put the form in a DIV and made a class and used Positioning in the class editor across breakpoints and got it in position of the middle side that they wanted, worked like a dream as I could get a pin point position.
Doing what I did above is more or less like a free move - set your position and BOOM! your in!
Blocs really has it all! - I experiment and play around, sometimes it’s not the best way! but it works and looks great!
Good luck
