[HugobosssParticipant]

Hi!

That helped for most of the post but as you can see in the attached exmple, it didn’t work here.

[JadeModerator]

Hi there,

Kindly resize the image you are trying to upload or provide us with the direct link to the page where the code didn’t work.

Thank you.

[HugobosssParticipant]

Hi!

You can see the issue at the end of the gallery, where the couple is cutting the cake.http://hofverbergphotography.se/brollopsfotograf-landskrona-sandra-lina/

Thanks!

[RadModerator]

Hi there,

You added all images in one column, and added this CSS as well,

.single-post .x-img img {
    margin-bottom: 0.2em;
}

Please remove that CSS, then add your images per row (1 column per row). This is because the previous CSS is provided to make columns behave as the grid with equal dimension and spacing. Hence, images outside the grid will, of course, don’t have to space.

Thanks.

[HugobosssParticipant]

Hi!

I removed the previously mentioned CSS and I now only have below code.
I create a new section for each set of image/images so I can easily change the order if I am not happy with the results.
I have re-created this blogpost in this way now and it looks good except when using 3 smaller images or 2 horizontal with 1 vertical. Can you please also help me with this?
Example can be seen at the end of the post:
http://hofverbergphotography.se/brollopsfotograf-landskrona-sandra-lina/

@media ( min-width: 768px ) {

.x-grid-images .x-section,
.x-grid-images .x-column,
.x-grid-images .x-img,
.x-grid-images .x-container,
.single-post .x-section,
.single-post .x-column,
.single-post .x-img{

margin: 0px !important;
padding: 0px !important;
}

.x-grid-images .x-img,
.single-post .x-img {
width: 100% !important;
}
.x-grid-images .x-column.x-1-1,
.single-post .x-column.x-1-1 {
width: 100% !important;
}
.x-grid-images .x-column.x-1-2,
.single-post .x-column.x-1-2 {
width: calc(50% – 3px) !important; /* 6px spacing / 2 = 3px */
}
.x-grid-images .x-container,
.single-post .x-container {
margin-bottom: 6px !important; /* 6px horizontal gap */
}
.x-grid-images .x-column.x-1-2:last-child,
.single-post .x-column.x-1-2:last-child {
margin-left: 6px !important; /* 6px vertical gap */
}

}

[Paul RModerator]

Hi,

Try adding a margin-top in the style field of your last image.

This is the effect – http://screencast.com/t/3lv9hzJSTPgP

Hope that helps.

[HugobosssParticipant]

Hi!

Thanks for the effort but I will just skip mixing vertical and horizontal images due to the gap etc.

How would I go about setting up my portfolio page to get the smaller gap between images?
The first gallery, bröllop, is created in Cornerstone as an example.
http://hofverbergphotography.se/portfolio

[DarshanaModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.page-id-7135 .x-column {
    margin-right: 2%;
}

Hope that helps.

[HugobosssParticipant]

Hi!

How do I fix the space beneath the images?
You can see the result of above code here:
http://hofverbergphotography.se/portfolio/

[Rue NelModerator]

Hello There,

Thanks for updating this thread! To resolve this issue, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

img.x-img.x-img-none {
    margin-bottom: 4px;
}

Hope this helps. Please let us know how it goes.

[HugobosssParticipant]

Hi!

When I add a link to the images in my portfolio above code doesn’t work. Any way to fix this?
An example can be seen at the bottom at the page beneath the landscape images.
http://hofverbergphotography.se/portfolio/

Thanks in advance!

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body a.x-img {
    margin-bottom: 4px;
}

Hope that helps.

[HugobosssParticipant]

Hi!

Could you please advise how I can keep the smaller gap also on mobile view? For some reason it works for the first images on the page but not for the others.

Please advise, thanks!

[HugobosssParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

The galleries that are showing large gaps on mobile are coming from the default padding of the section that contains the images.

Please try to add this code in the customizer:

@media (max-width: 480px) {
    .x-section {
        padding: 0 !important;
    }
}

Hope this helps.

[Author]

Posts