[HugobosssParticipant]

Hi!

Could you please advise how I can align an image to the bottom of the row?
I have a row with 1 vertical image and 2 horizontal images and I want to align the bottom left image to the bottom of the row.
I think you can see easilty what I mean on my site.

Thanks!

[HugobosssParticipant]

This reply has been marked as private.

[RahulModerator]

Hey There,

Thanks for writing in!

Unfortunately, the given URL doesn’t seem to have anything. Can you please explain your issue with a proper Screenshot?

Thanks.

[HugobosssParticipant]

Hi!

Sorry, the post is set to “private” hence why I provided the login details, but the attached screenshot might be a much easier way.

Thanks for the quick response!

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (min-width: 980px){
    #x-section-1 > .x-container > div:nth-child(1) > a.x-img:nth-child(1) {
        margin-bottom: 57px;
    }
}

Hope it helps 🙂

[HugobosssParticipant]

Hi!

Thank you! Changing to margin-bottom: 70px; solved it.
However, it creates a large gap (obviously, do you have any advise on how I can display my images in the way i want without the gap?

Thanks!

[ChristopherModerator]

Hi there,

Images are displaying at their 100% size. To reduce the gap, add width:93%; in white dress image’s style field and then adjust the margin.

Note that you may need to do this for other images as well to keep the alignment.

Hope it helps.

[HugobosssParticipant]

Hi!

It’s just too complicated to make this look good when using different combinations of images, for example 1 large images, followed by 2 small horizontal and 1 vertical, followed by 1 vertical etc.

Is there any way I can decrese the gap between images as in the attached example?

Could you please also advise how it’s possible to align a single vertical image in the centre and not to the left, and still have it aligned in the centre on mobile view?

Thanks!

[RadModerator]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( min-width: 768px ) {

.x-grid-images .x-section, 
.x-grid-images .x-column, 
.x-grid-images .x-img, 
.x-grid-images .x-container {
margin: 0px !important;
padding: 0px !important;
}

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

}

Then edit your page and find Page Settings section and add x-grid-images to Body Class(es) input field. We did it this way so it will only affect the page that has x-grid-images class. Instead of affecting all section and columns globally.

Thanks!

[HugobosssParticipant]

Hi!

Amazing, thank you so much!
How should I do if I want to apply this setup to every blogpost? For this post I will have around 50 “sections” because it’s easier to make changes to the order of images afterwards if I am not happy with how it looks, so it’s a lot of sections to add “x-grid-images” to.

Do you have an equally great idea to images as the attached example?

Thank you!

[LelyModerator]

Hi There,

To apply this same setup for single post page, no need to add x-grid-images class. We can use the default single-post selector. Just update above CSS to this:

@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, 
.single-post .x-container {

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 */
}

}

Hope this helps.

[HugobosssParticipant]

Hi!

All content is aligned to the left now and it doesn’t work good on this blogpost:
http://hofverbergphotography.se/brollopsfotograf-landskrona-sandra-lina/

Do you know what the reason is?

Thanks!

[LelyModerator]

Hi There,

Please update above CSS to this:

@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 */
}

}

I have remove the single post main container from setting margins to zero. This makes the content aligned left.
Hope this helps.

[HugobosssParticipant]

Hi!

This solved the alignment. It doesn’t work with 3 smaller images but I can live with this.
However, this blogpost doesn’t have any spacing at all: http://hofverbergphotography.se/brollopsfotograf-landskrona-sandra-lina/

Could you please advise?

Thank you!

[JadeModerator]

Hi there,

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

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

Hope this helps.

[Author]

Posts