Space between images in single portfolio

How can we achieve an even gap between the images in the single portfolio, can't find anything in docu or discussions:

THX
Bernhard

Comments

  • Hi,
    Please send a link to that page.
    Is it single portfolio or main portfolio page?

    Remember, that if you use some kind of image item, then just change the layout of that item.
    Thanks
  • As mentioned above it is the single portfolio page.

  • Hello,
    you are using a gallery item, which style is set to masonry. Edit the gallery item in the Muffin Builder and change the style to grid.
    thanks
  • I'm lost, I use the theme portfolio, so there is no single page to edit the Muffin Builder. Can you be more specific where to change?

    Thank you very much
    Bernhard

  • In the previous answer, you said:
    "As mentioned above it is the single portfolio page."

    So I looked at the screenshot and went to the single portfolio page:

    And this is a gallery in the single portfolio project. When you edit the single portfolio, you will see the Muffin Builder and within it, a item named Image gallery. Edit this item.

    thanks
  • Thanks, but there is no style "Grid". "Default" makes spaces, but works with same size images only, otherwise it creates huge white spaces:


    So masonry is the only way, but we simply need the images separated, any CSS attempt failed.

    THX
    B.
  • Unfortunately, it cannot be changed with the CSS code.
    You would have to edit theme files to change that - because JS script is calculating the width of image container and fit it on the screen.
    Applying additional padding/width/margin through the CSS can make some troubles with responsiveness, that's why suggest not to do it.
    Thanks
  • You "suggest not to do it"? What do you think my client tells me when I say that to him (slam in the face, right?).

    please solution, you mentioned the "grid" style, but I can't find grid in the selection. Maybe that's the solution.
  • Yes, we mean default. Default is the standar grid for the gallery.
    You must have the same size images to have a grid.
    To do this, go to settings>media and change the thumbnail image sizes to squared, you need to set the dimmensions. 780x780 will be enough and use the crop option as well.
    Then use the "thumbnail regeneration" plugin, which can be found in betheme>install plugins.

    There is no other way to have a grid.
  • We don't have the same size, unrealistic for a photographer. Why are you not adding a gap in the options, takes you probably 15 minutes. All big themes have that option. tHX!
  • That's why we created the "Masonry" style, why won't you try it?
    Check all possibilities of gallery item here:

    Thanks
  • Oh yes that is exactly what we are looking for, how do we get the frame added? Using shortcode or builder element we don't get the frame around the images.

    THX
  • edited July 2019
    Please use that CSS code:
    .gallery-item .image_wrapper {
    border:2px solid black;
    border-color:black !important;
    }
    Paste that into the Theme Options > Custom CSS & JS > CSS
    Thanks
  • We found the border setting in theme options - would have been easier if you would have pointed us to this weeks ago instead of a css fix, sorry, would have spared us a lot of trouble w client :(

    Please enhance your docu, you only describe what is anyway visible in the option itself without a real documentation of the functions - thx! Very much appreciated and requested since Falco times ;)

    Happy 4th, wherever you are, fight for freedom.
  • Yes, it could be added through the theme options too, but you are not able to customize the width of the borders then.
    I assumed, that you want to control it - sorry.

    For anybody who'll be looking for answer how to set the border through the theme options.
    Theme Options > Global > General, in the "Image Frame" section

    We are already during creating new documentation, it will be enchanced and more customer friendly.
    I hope you'll love it!

    Greetings.
Sign In or Register to comment.