[Resolved] Adjust gutenberg separator line

[Chris]

In the wordpress editor, the separator line isn’t full width, which is what I want: http://prntscr.com/qi9g6a.

But when I preview it, it shows a full width line: http://prntscr.com/qi9giw

I came across this article and it seems the length of the line is determined by the theme. Would you know how to change the length?

[Leo]

Hi there,

Any chance you can link us to the page in question where the line can be seen?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Chris]

Done 🙂

[Leo]

This is what I’m seeing which is normal?
https://www.screencast.com/t/Fk5UBUOOvp5O

[Chris]

Right, that’s a full-width line.

I’d like a 1/4th line, like this: http://prntscr.com/qii5oj

[David]

Hi there,

try this CSS:

.wp-block-separator {
    width: 25%;
}

[Chris]

Is there a way to have both options: full-width & 25%?

[David]

You can use this CSS instead:

.wp-block-separator:not(.is-style-wide) {
    width: 25%;
}

Then the default separator will be 25% but the Wide Line option will be 100%

[Chris]

That worked! Thanks a ton, David!!

[David]

You’re welcome

[Author]

Posts