Archived topic
Add caret symbol below container
3 replies · Started by Max on September 18, 2022
Hi there!
I'm trying to add a caret symbol below a container with a testimonial, pointing at the person's picture. What would be the best way to do this in GeneratePress?
- What I have on my old website: https://jmp.sh/tBqwFrp
- How it looks now with GeneratePress: https://jmp.sh/TG223nH
It's probably very simple, but I can only come op with weird workarounds.
Thanks for the help!
Hi Max,
The login doesn't work for me, so I can't log in and take screenshots to show you.
I'll try to describe it the solution below.
1. Go to the page editor, select the 3 gb containers that contain the testimonial texts, add an additional CSS class, eg. testimonial.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
2. Go to customizer > additional CSS, add this CSS:
.gb-container.testimonial >.gb-inside-container {
position: relative;
}
.gb-container.testimonial >.gb-inside-container:before {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
content: '';
position: absolute;
bottom: -15px;
left: 10px;
}
Thanks Ying, much appreciated! That worked like a champ!
Glad to hear that :)