Reducing height of Widget Footer Area

  • Resolved toupstrey

    (@toupstrey)


    9 years, 9 months ago

    Hi all,

    I’m trying to reduce the overall size of the widget footer area. I currently have it configured to only show the widgets in the footer area of my static home page here: https://redstickfrench.com. I am using Jetpack’s widget to insert the .png images that I will soon hyperlink to hidden pages not in my nav menu. My issue is that the titles for each widget, such as “C.V.” and “Resources” are too far above the icons I’ve put in. The region for the footer widgets is also just too large. Reducing the pixels for the image size in the widget editor does not reduce the size (height) of the footer, nor does it reduce the space between each image and the title floating above it. I have cropped the canvas for each .png to the very edge of the red lines that they’re made of.
    I have tried reducing the padding here to .25em:

    .footer-widget-area {
	background-color: #fafafa;
	border-top: 1px solid #eee;
	padding: .25em 4.661%;
}

    This did not really make a difference. I would really appreciate any help with this.

    Thanks!

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

  • because the images are formatted with .aligncenter, they have a top and bottom margin of 1.5em;

    .footer-widget-area .widget img.aligncenter { margin-top: 0; margin-bottom: 0; }

    there is also a relative large bottom margin on the .widget style;

    .footer-widget-area .widget { margin-bottom: 0; }

    and then there is a small bottom margin on the widget title;

    .footer-widget-area .widget .widget-title { margin-bottom: 0; }

    you can investigate all the formatting using a browser inspection tool such as Firefox’ web developer add-on …

    Thread Starter toupstrey

    (@toupstrey)

    Thank you so much!
    I have been using the Safari developer feature to inspect the elements, but I’m not very familiar with the syntax of CSS, so I struggle to make the adjustments I’m looking for.
    This solved my problem when I added modified versions of the code you supplied to the Custom CSS module. Thanks again!

    Moderator Kathryn Presner

    (@zoonini)

    alchymyth – thanks for helping out toupstrey!

    toupstrey – glad that did the trick! If you’d like to get more comfortable with CSS you might want to check out https://cssworkshop.wordpress.com/ – it includes a section with more resources at the end too!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reducing height of Widget Footer Area’ is closed to new replies.