HR lines won't respond to CSS

[mike4]

https://syfc.somersetinteractive.com/

I want to center the blue line in the red section near the bottom, but it won’t respond to any css. Any ideas?

Thanks

[Prasant]

Hello @mike4,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS to center align hr line:

.x-line {
    margin: 0 auto;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[mike4]

Thanks. One problem is I don’t want it to move all the hr lines. I tried using the specific class for each x-line such as hr.e7-54.x-line or .e7-54.x-line, but that does’t work.

Any ideas as to where I’m going wrong?

[Prasant]

Hello @mike4,

Thanks for updating the thread.

In that case please add a class name under Customize > Class. https://cloudup.com/cEcslOq07Rl

After that add following CSS under X > Theme Options > CSS:

.hr-line-styling {margin: 0 auto;}

You can change the class name hr-line-styling as per requirement.

Thanks.

[mike4]

Looks good. Thanks

[Prasant]

You are most welcome.

[mike4]

Ran into a second problem on this same page with aligning HR lines. I reused the CSS class for another line, but it did not take under services. This is an issue I’ve noticed before while adding classes to elements.

Any ideas?

[paul.r]

Hi,

The line element has its own margin that takes priority than your css.

To make your css override it, you can add !important to your css code

eg.

.hr-line-styling {margin: 0 auto !important;}

Hope that helps.