Modify the gap between photograph and descrition.

  • I am using Windows 11 with a ‘Weaver Extreme’ WordPress theme on a website devoted to local history.  To build the website I have used WordPress Guttenberg.  Many pages within the website, which can be found at https://www.downleyhistory.uk  are of various historic photographs which are displayed using the’ image’ (see https://downleyhistory.uk/high-street/).

    I have two wishes.? The first is to decrease the gap between the year and the photograph.? The second is to be able to justify left the description beneath the year.? Alternatively if this is not possible I would like to reduce the gap between the year (within the image block) and the subsequent ‘paragraph’ block.

    If you are able to help  it would be much appreciated but please bear in mind I am a complete novice as far as CSS or htlm is concerned.

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

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

  • You can use this CSS to reduce the GAP. 

    #post-55 img.wp-image-2463,
#post-55 img.wp-image-2125{
    margin-bottom: 0;
}

    As for the second part, i didn’t get what you’re asking for. Thanks

    Moderator bcworkz

    (@bcworkz)

    To left justify the caption but not the year, first left justify everything, then override just the year’s styling:

    .wp-block-image figcaption {
    text-align: left;
}
figcaption.wp-element-caption strong {
    text-align: center;
    display: block;
}

    This takes advantage of the years always being styled with strong (bold, for the year only, never other caption text). If years are not bold, this will not work. The block display is necessary or the browser wouldn’t know what to center the text on. This causes additional space to occur below the year. The best way to correct this is to remove the line break after the year. As long a the year, and only the year is bold, the line break will occur automatically.

    If removing line breaks is too cumbersome, we could specify a negative bottom margin for the year, or specify certain line breaks have zero height.

    The best place for custom CSS code is the customizer’s Additional CSS section.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Modify the gap between photograph and descrition.’ is closed to new replies.