More/roll button alignment

Hello all,

This is the main row conatins the layout builder widget

Here is the inside of the layout builder.

The button centrally align itself in the right cell on row 2.

I would like to centrally the button with the parent row where the layout builder widget is inserted.

Many thanks
Tom

Hello Tom,

Try to add that button into the third row within Layout Builder widget.

You can use this HTML code with Custom HTML widget:

<a class="roll-button more-button" href="button-link">button-text</a>

Just replace button-link and button-text with desirable values.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman

Thank you for the reply.

I’m working with Tom on this website. I’ve managed to get it working on a new third row in Layout builder.

I’ve noticed in the first part of the code that it is selecting the element(s) I have applied style sheet rules to in my child theme. From my knowledge of CSS selectors they can done via ‘.’ or ‘#’, and when listing CSS selectors together they are separated by ‘,’

My question is in this HTML code do I simply remove the symbols if I want to select a CSS element?

Kind regards

Will

Hello Will,

I’m not sure what exactly is your issue and what symbols you mean, can you please describe it more precisely?

Kind Regards, Roman.

Hi Roman

Thank you for the reply.

If I wanted insert HTML like with the button above, do I simply find the CSS element in something like inspector view of my web browser and remove the symbols in front of the selector?

For example
.header-image

would be come
header image

https://www.w3schools.com/cssref/css_selectors.asp

Regards

Will

Hello Will,

Not exactly, .header-image would become header-image

https://www.w3schools.com/tags/att_class.asp

Kind Regards, Roman.

1 Like

Thank you Roman. That’s explains it perfectly. I’ll make sure Tom sets this thread as ‘resolved’.

You are welcome Will! :slight_smile:

Kind Regards, Roman.