Help with the style

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 1 month ago.

Author Posts

Kezers

Hello, I’m absolutely new with Microthemer. I’m trying to figure out how to adjust this:

https://cln.sh/MDS51V

the url is https://www.flagmaker.eu/en/product/flag/ then you should press “next” and select “carabiner” option.

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…

2) I would like to move up the button next

Anyone can help me how to do this?


Sebastian

Hey,

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:

label.wapf-field-input label[for] {
    display: grid;
    grid: auto / min-content min-content auto;
    align-items: center;
    justify-items: start;
    column-gap: 3px;
    margin-top: -2px;
}

CSS grid checkbox alignment

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?

Cheers,
Sebastian


Kezers

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.

Do you know some video/tutorial for dummies? 😁


Sebastian

Hey,

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.

Here is a video explaining how to use all of the targeting options to select the right element.

And the previous video I recommending shows how to copy and paste selectors into Microthemer, as an alternative to using the targeting options.

Does that make any sense?

You must login or register to reply to this topic.