Skip to main content
Inspiring
April 7, 2021
Answered

RH 2017 - Alphabet is not displaying, Responsive

  • April 7, 2021
  • 3 replies
  • 212 views

I added  Glossary to an existing project.  I changed the glossary option in the screen layout (Azure Blue) to "true" to display the glossary.  

 

In the output/published files the glossary behaves correctly, except the alphabet does not display.   I have a list of words (alphabetized) but no letter separators.    I have customized the colors of the screen layout (backgrounds, link colors, font), but have not changed anything else.  I'm using the default icons and layout.  And, turning "on" the glossary works...it just doesn't display the alphabet separators.  I thought maybe they were "white" but there's not even an empty space 🙂

 

(yes, I have more than one "letter" of the alphabet used in the glossary...)

 

Any other files I should be looking at to see why they aren't displaying?

 

RH 2017.13.0.0.257

Responsive HTML

Azure Layout 

 

    This topic has been closed for replies.
    Correct answer Amebr

    Lol. Faffing around I couldn't get it to work. Then I resized my browser smaller. Looks like by default the letters only show up for tablets and mobile screen sizes.

     

    To get it to display in desktop sizes, you'll need to edit the layout.css in a text editor.

     

    Find this style 'body.media-desktop div.glo-holder .GloAlphabet' and delete the text that says 'display: none;'

    3 replies

    Inspiring
    April 15, 2021

    Thank you! And, as an added bonus, I also changed the index css entry.  

    Community Expert
    April 8, 2021

    If you want letters for the index, you'll likely need to do something similar for an index style.

    AmebrCommunity ExpertCorrect answer
    Community Expert
    April 8, 2021

    Lol. Faffing around I couldn't get it to work. Then I resized my browser smaller. Looks like by default the letters only show up for tablets and mobile screen sizes.

     

    To get it to display in desktop sizes, you'll need to edit the layout.css in a text editor.

     

    Find this style 'body.media-desktop div.glo-holder .GloAlphabet' and delete the text that says 'display: none;'