Quote block not shown properly

Resolved Adrean
(@adrean)

3 years, 2 months ago

Hi one more time,

i am wondering – is this quote block shown right? I only know this one with a vertikal line in front with accent colors, but it’s not showing. I have no idea why the line is not visible, espacially on mobile it looks weird. Does anyone know why this is happening and how to solve it?

Thank you a lot and have a great day,

Adrean

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Moderator Kathryn Presner
(@zoonini)

3 years, 2 months ago
Hi @adrean – the Quote block in this theme is “plain” and does not have a vertical line to the left of it, as you can see in the Style Book:

To add a vertical line on the left, you can add some custom CSS in the CSS editor built into WordPress 6.2.

You can try something like this in the site-wide CSS editor, varying the colour or width as you prefer:
```
/* Quote block */
.wp-block-quote {
  border-left: solid #000000 4px;
}
```
Let me know how it goes.
Thread Starter Adrean
(@adrean)

3 years, 2 months ago

Dear @zoonini

thanks a lot, i think that will do. Seems to be working fine. The hole text of the quote block is a bit narrow on mobile, but i guess thats just how it is – with or without line in front.

Also I was unsure if it is supposed to be like this, because i have to style options for the quote block – standart and simple – but both seem to do the same.

Thanks again, great help, awesome.
Moderator Kathryn Presner
(@zoonini)

3 years, 2 months ago
thanks a lot, i think that will do. Seems to be working fine.

Great!

The hole text of the quote block is a bit narrow on mobile, but i guess thats just how it is – with or without line in front.

You could try adding this to remove the left and right margin on smaller screens:
```
/* Quote block - smaller screens */
@media screen and ( max-width: 599px ) {
    .wp-block-quote {
        margin-left: 0;
        margin-right: 0;
    }
}
```
Also I was unsure if it is supposed to be like this, because i have to style options for the quote block – standart and simple – but both seem to do the same.

I’m not quite sure what you mean, but if you’d like me to look at this further, could you provide a screenshot so I can have a look? Thanks!
Thread Starter Adrean
(@adrean)

3 years, 2 months ago
Awesome, thank you @zoonini

More than i could ask for. Seems to be working. I modified your code a little bit for incase i also want to change the style for desktop. Tried this version, seems to be also working. Could i use it like that for incase I not only want it like this on mobile? (I have near to zero knowledge about css).
```
/* Quote block */
.wp-block-quote {
margin-left: 0;
margin-right: 0;
}
```
And as requested, here is a screenshot of my quote-settings (while editing, quote block selected). Both options show and look exactly the same. (“Einfach” means “simple”).

Hope that helps. Would interest me, if you know why both show the same. Maybe i am missing something. Anyway, my problem is solved. Thank you a lot.
Moderator Kathryn Presner
(@zoonini)

3 years, 2 months ago

Hi @adrean –

Tried this version, seems to be also working. Could i use it like that for incase I not only want it like this on mobile?

Yes, absolutely, you can move the CSS declaration out of the media query – just as you did – and it will apply to all screen sizes that way.

And as requested, here is a screenshot of my quote-settings (while editing, quote block selected). Both options show and look exactly the same. (“Einfach” means “simple”).

Thanks for the screenshot. You’re quite right, the two Quote block types do show up when adding the block to a page or post, even though they don’t both show in the Style Book area.

After digging a bit more, it looks like the missing left border in one of the block variations is actually a bug, and there are already two related Trac tickets for it:

https://core.trac.ww.wp.xz.cn/ticket/57506

https://core.trac.ww.wp.xz.cn/ticket/57400

Hopefully this will be fixed in an upcoming version of the theme!