[TimParticipant]

Hi. I am trying to make a band containing various images on my homepage. I want the images to fill the whole width of the band/container and have an equal spacing betwen them.

Here is an example of what it should look like: http://captainfin.com/

I havent realy found asolution jet due to, trying back and forth with various image sizes and class rules. Is there a solution?

[TimParticipant]

Here is my page: http://www.sandbanksylt.de/test/

[Nabeel AModerator]

Hey Till,

You’ll need to re-size the images first in order to display them equally on the page. The first and the last image should have 280 x 373px dimension. The middle two images must be re-sized to 340 x 177px. They will be displayed correctly with equal spaces.

Let us know how this goes!

[TimParticipant]

Nah sorry i didnt work….. the look remains the same just with smaler images.
Thru i would like to have the middel images to be a larger (1/4 1/2 1/4 option.)

This is how iot looks right now:http://www.sandbanksylt.de/test/

[TimParticipant]

and of course i would like to have the same small spacing betwen the images above and below them.

[ChristopherModerator]

Hi there,

I suggest that you use Gallery for this. Please follow the link below for more information:

http://theme.co/x/member/kb/how-to-setup-galleries/

Hope it helps.

[TimParticipant]

well, this wont work for me as the gallery will cut down the original format of the image…. or is there an option to keep the original format?

if you take a look at how it is now http://www.sandbanksylt.de/test/

all i want, is to have a smaller space betwen the 3 rows with pictures and the pics in the middle to be in the same size

This is g good example of what i am trying to make http://shop.au.deuscustoms.com/ or http://www.sandbanksylt.de/test/

exept from that it does not matter how high my images are.

i did that with a class to the images in the bottom of this post http://www.sandbanksylt.de/test/hobie-story/

but using that class wont work on the home page because the images to the very righthand site wont allign with the slider above http://www.sandbanksylt.de/test/

[Paul RModerator]

Hi Till,

Can you try the code below.

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

#x-content-band-3 .x-column.one-fourth {
    width: 25%;
}

#x-content-band-3 .x-column {
    margin-right: 1%;
}

Thanks

[TimParticipant]

Sorry it is not working…. what happend is that everything moved to the left: http://www.sandbanksylt.de/test/

[MrinalMember]

Hi Till,

Your site is giving me a 404 error to me:

[TimParticipant]

Hi i did get it to work by changing the values in with and margin right. now i just ned to know how to change the space under the images, as margin-bottom wont work.

[Nabeel AModerator]

Hey Till,

Please add the following CSS code via Appearance > Customize > Custom > CSS:

#x-content-band-3 {
padding-bottom: 0 !important;
}

Let us know if this works!

[TimParticipant]

the troulbl is, that if i use this rule:

#x-content-band-2 .x-column.one-fourth {
width: 25%;
}

#x-content-band-2 .x-column {
margin-right: 1%;
}

there will be a gap to the right hand side, so the pics used will not allign with the elements abowe….

I found out that if i wrote the rule like this:

.x-column.one-fourth {
width: 25%;
}

.x-column {
margin-right: 1%;
}

i get exactly what i want, but it will thake influense on the other content bands in the side and look bad on a mobile phone……

Now my question is:

1# is it possible to change the rule so there will be alignment the side? (btw. with the original set up of the contband set up in the visual editor….. there will be no gap to the righthand side, but to much spacing betwen the images)

2# can i use a differenrt rule for the mobile view, so the all images will be showen large?

[TimParticipant]

my site:http://www.sandbanksylt.de/test/

[ChristopherModerator]

Hi there,

Please compare your CSS with mine and delete the existing codes of yours and add this one instead.

@media screen and only (min-width:979px){

#x-content-band-2 .x-column.one-fourth {
width: 24%;
}
.x-column.one-fourth {
width: 25%;
}

.x-column {
margin-right: 1%;
}
#x-content-band-2 .x-column.one-fourth {
width: 25%;
}

#x-content-band-2 .x-column {
margin-right: 1%;
}

}

Hope it helps.

[Author]

Posts