1) I would like to move up the text of the checkboxes to be aligned to checkboxes itself. And to reduce the gap between two checkboxes to fit in the field space…
Lining up checkboxes with CSS is always tricky. I find CSS grid to be the most reliable way to vertically align content. So, create a selector for the label element that contains the checkboxes and text. You can find this by clicking around in Microthemer, or by copying and pasting the following custom selector:
label.wapf-field-input label[for]
After playing around a bit, these are the styles I added to make things appear like the screenshot below:
You can copy and paste these styles into the code editor to the left of the Font property group. And then adjust them further using the UI fields, if you wish (follow the blue dots).
The “Next” button is already aligned, so I guess you figured that out already?
Hello Sebastian,
thank you for your help. I tried and obviously I’m not able to obtain your result. I’m sure I’m missing something since I’m newbie to microtheme.
I’m stuck to the first step, I don’t find selector.
No problem, Microthemer won’t find that exact selector because it’s a bit unconventional. It’s the selector used by the theme or woocommerce. I found it when inspecting the page using Chrome’s dev tools. But if you click on one label element that contains the a checkbox, Microthemer should suggest a selector that targets both labels. And that should work as well.
.
