• kevinmac

    (@kevinmac)


    I have created menu items in the footer widget area but I notice that the line height is too much. There is too much gap between the menu items. Here is a screenshot of the problem:

    • This topic was modified 5 years ago by kevinmac.

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Leo

    (@leohsiang)

    Hi there,

    Any chance you can link us to the site in question?

    Let me know πŸ™‚

    Thread Starter kevinmac

    (@kevinmac)

    Hi Leo,

    Yes here is the link: http://www.shorturl.at/irLS0

    Leo

    (@leohsiang)

    That link just takes me to this page:
    https://www.shorturl.at/

    Thread Starter kevinmac

    (@kevinmac)

    Ok, try this one. Its the third link.

    https://i.ibb.co/Pt3k2jY/2021-07-25-9-48-45-AM.png

    Leo

    (@leohsiang)

    Hmm looks like the block widget is causing the issue.

    Can you try a navigation menu widget instead?

    Then you would get the same layout as the footer of our site here:
    https://generatepress.com/

    Let me know if this helps πŸ™‚

    Thread Starter kevinmac

    (@kevinmac)

    Ok that seems to help a lot however the gap between the title and the menu items is still larger than the site you sent me. Also, I notice that the title of the menu items is bold on your website but when I make it bold by changing the H3 font to Bold, it does not reflect.

    Elvin

    (@ejcabquina)

    Hi there,

    You have this custom CSS that is causing the space between the menu and the title.

    .site-footer .widget-title {
        margin: -20px -20px 20px -20px;
        padding: 20px;
        background-color: #000;
        color: #fff !important;
    }

    It’s the margin bottom 20px + the padding on that CSS.

    As for the fontweight.

    How are you setting it? The selector for the widget title is h2.widget-title.

    Example:

    .widget-title{
    font-weight: 600;
    }
    Thread Starter kevinmac

    (@kevinmac)

    I went to Customize > Typography > Heading 3 (H3) and changed the size but no effect. When I inspected the titles with Chrome Inspect, it appears that the titles were wrapped in H3 which is why I assumed that that was the setting to use. I have used your code to bold the titles and that worked good, thanks however the code for the gap still did not work. Here is a screenshot

    https://ibb.co/RQ8rWwR

    David

    (@diggeddy)

    Hi there,

    as Elvin mentioned, you have this CSS ( in Customizer > Additional CSS ):

    .site-footer .widget-title {
        margin: -20px -20px -20px -20px;
        padding: 20px;
        background-color: #000;
        color: #fff !important;
    }

    To remove the additional margin its adding then Change it to:

    .site-footer .widget-title {
        margin: -20px -20px 0px -20px;
        padding: 20px;
        background-color: #000;
        color: #fff !important;
    }
    Thread Starter kevinmac

    (@kevinmac)

    Solved. Thank you!

    David

    (@diggeddy)

    Glad to hear that

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

The topic ‘How to decrease line height in footer wigets?’ is closed to new replies.