How to increase the size of drop down arrows and bullets

How do I increase the size of the drop down arrows or triangles that indicate content underneath that is hidden? I find the size of the these triangles and bullets so small and light that I often miss them. (The font size on the text is okay, though.)

Thanks.

Michael

Try adding the following css rules inside file custom.css :

.rotating-arrow svg {
    fill: black;
    height: 24px;
}
.bullet-container .bullet {
    background-color: #999;
    height: 12px;
    width: 12px;
}

Yes, this helped a lot. The arrows and bullets are now larger, easier to see. If you have a moment to tell me how to make them darker (they are very light gray) that would be great.

In any case, I appreciate the help!

Michael

I have updated the answer above for darker colors.

The arrow is now darker, so thanks! I would like to make the round dots darker as well. So I took what you wrote and using that as a model I added fill: black as part of the .bullet-container.bullet part. See below, but it didn’t make a difference.

.rotating-arrow svg { fill: black; height: 24px; } .bullet-container .bullet { fill: black; background-color: #999; height: 12px; width: 12px; }

Michael

  • The attribute fill doesn’t apply to the bullets.
  • The bullets are as dark as the arrow.
  • If you want the bullets even darker, should change their background-color to either:
    • a lower hexadecimal value (e.g. #555)
    • a dark named color (e.g. black)