Home Forums Weaver Xtreme Theme Spacing of gallery?

Topic Resolution: Resolved

This topic contains 12 replies, has 4 voices, and was last updated by  scrambler 3 months, 2 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #58301

    nickrobinson
    Participant

    Can anyone help me reduce the space between these gallery images?

    http://wp.origami-artist.com/test/

     

    thanks 😉

    #58304

    scrambler
    Moderator

    Use a larger size for the images 🙂

    Right now your image size is set to 150px thumbnail. Chose a bigger size so they occupy more space.

    #58306

    nickrobinson
    Participant

    I don’t want them larger, but with less space between…

    #58308

    scrambler
    Moderator

    Then you need to limit the width of the gallery container.

    You can add the rule below to the theme Global Custom CSS rule box to do that, using the value you like

    #gallery-1 {max-width:600px;}

    #58309

    beethoven
    Participant

    couldn’t making five columns and not four be another solution ?

    #58311

    scrambler
    Moderator

    You decide what you want…

    Do you want 4 columns close to each other in the middle, or 5 or 6… Up to you. Try them all and decide which one you like best

    I gave you the way to make your 4 columns closer

    #58312

    Weaver
    Keymaster

    You could try creating the gallery with the Gutenberg block editor.

    #58313

    nickrobinson
    Participant

    Scrambler’s solution worked perfectly for me – thanks! Do you know which tag control the vertical padding?

    I’ve tried

    #gallery-1 {max-width:600px;
    padding-top: 0px;
    padding-bottom: 0px;
    }

    #58317

    scrambler
    Moderator

    If you inspect the page with the browser developer tools, you will see a rule for the block image plus text

    #gallery-1 .gallery-item {margin-top:10px;}

    So you can enter that same rule with a different value.

    then there is a space below the caption that can be changed with the rule below (existing value is 1.5em)

    #gallery-1 .gallery-item dd {margin-bottom: 1.5em;}

    Finally there is the space below the image that can be changed with the rule

    #gallery-1 .gallery-item img {margin-bottom:0.75em;}

     

    #58339

    nickrobinson
    Participant

    I tried this CSS, but the spacing was unaffected

     

    #gallery-1 {max-width:600px; )
    #gallery-1 .gallery-item {margin-top:0px; }
    #gallery-1 .gallery-item dd {margin-bottom: 0em; }
    #gallery-1 .gallery-item img {margin-bottom:0.5em; }

    #58340

    scrambler
    Moderator

    You have a syntax error in your first rule, with a closed parehthesis instead of a closed curly bracket which makes all the rules after that invalid.

    That said once you fix that, if it still does not work, you may need to add !important to the rules

    #gallery-1 {max-width:600px;}
    #gallery-1 .gallery-item {margin-top:0px !important; }
    #gallery-1 .gallery-item dd {margin-bottom: 0em !important; }
    #gallery-1 .gallery-item img {margin-bottom:0.5em !important; }

    #58348

    nickrobinson
    Participant

    perfect. Apologies – my eyesight is getting worse as I crawl towards my 70s ;(

    #58361

    scrambler
    Moderator

    Feeling your pain 🙂

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.