Support » Plugin: WordPress Tag Cloud Plugin - Tag Groups » How to reduce the distance between headline and tags using a responsive list

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Chris

    (@camthor)

    You could try for example:

    .responsive-tag-groups-list h3 {
      margin-bottom: 5px !important;
    }

    If you use @media in your CSS you can use different values for each screen size.

    Thread Starter meinwegausdersexsucht

    (@meinwegausdersexsucht)

    When I put

    .responsive-tag-groups-list h3 {
      margin-bottom: 5px !important;
    }

    into the custom css, the words “.responsive-tag-groups-list h3” get red color.

    Is there a special area, where I have to put the code in?

    My custom css looks like this:

    @media only screen and (max-width: 700px) {
      .responsive-tag-groups-list {
        column-count: 1;
        /** text-align: center; **/ /** optionally uncomment the code on the left to align tags to the center **/
      }
    }
    @media only screen and (min-width: 701px) and (max-width: 1000px) {
      .responsive-tag-groups-list {
        column-count: 2;
        column-gap: 10px;
      }
    }
    @media only screen and (min-width: 1001px) {
      .responsive-tag-groups-list {
        column-count: 3;
        column-gap: 10px;
    Plugin Author Chris

    (@camthor)

    Where did you put it? Maybe some CSS that you have before is not finished (like missing }).

    This should work:

    @media only screen and (max-width: 700px) {
      .responsive-tag-groups-list {
        column-count: 1;
      }
      .responsive-tag-groups-list h3 {
        margin-bottom: 5px !important;
      }
    }

    and so on

    Plugin Author Chris

    (@camthor)

    My custom css looks like this:

    Two closing curly braces are missing in your CSS at the end.

    Thread Starter meinwegausdersexsucht

    (@meinwegausdersexsucht)

    Thank you very much, like you have said it, it works in both ways (I can use it just for the small screens or for all screen sizes).

    I would like to do the same with the gap under the taglines. Is there a possibility to reduce the distance between the last tagline (e.g. of the letter S) and the next headline (in this example “T”), too?

    Plugin Author Chris

    (@camthor)

    This would be margin-top. All together:

      
    .responsive-tag-groups-list h3 {
      margin-top: 5px !important;
      margin-bottom: 5px !important;
    }
    
    Thread Starter meinwegausdersexsucht

    (@meinwegausdersexsucht)

    That’s it! Thank you very much, again!

    Plugin Author Chris

    (@camthor)

    You’re welcome 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to reduce the distance between headline and tags using a responsive list’ is closed to new replies.