[sandra.iParticipant]

Hi

I’ve been trying to figure out how to layout 2 block grids so that all the blocks are evenly spaced out, but I can’t seem to sort it out, could you help me?

I attach screen grabs of the issues:

[sandra.iParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

You forgot to provide us with URL.

Thanks.

[sandra.iParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please update following code :

  .x-block-grid.four-up > li {
    width: 47.5%;
}

to:

  .x-block-grid.four-up > li {
    width: 45.5%;
margin :4% 1% 1% 0
}

Add this code as well :

@media (max-width: 979px){
.x-block-grid.four-up>li:nth-child(3), .x-block-grid.four-up>li:nth-child(4) {
    margin-top: 0%;
}
}

@media (max-width:767px){
.x-block-grid.four-up > li {
    width: 45.2%;
    margin: 5% 1% 4% 3%;
}
}

Hope it helps.

[sandra.iParticipant]

This reply has been marked as private.

[sandra.iParticipant]

Hello…?

[FriechModerator]

Hi There,

Would you mind removing all the custom CSS you applied on the Grids? Its getting complicated and hard to formulate a custom for it. And please add a different class for the first and second grid so we can target it easily.

Thanks,

[sandra.iParticipant]

Hi

I’ve assigned the classes grid1 and grid2 to the left and right grids respectively, here

http://www.rochesterclinic.co.uk/clinic/the-3-point-plan/

Thanks

[sandra.iParticipant]

sorry that was the wrong url, I’ve just migrated sites

I’ve assigned the classes grid1 and grid2 to the left and right grids respectively, in this page

http://www.sandraishkanes.co.uk/clinic/the-3-point-plan/

Thanks

[FriechModerator]

Hi There,

First lets balance the space because the grid items on desktop. Add padding-right: 1.25%; on the left column, and padding-left: 1.25%; on the right column. That should give the 8 images equal space from each other until it become a two column grid, add the custom CSS below to correct that.

@media (max-width: 767px) {
	#x-section-4 .x-container.marginless-columns .x-column.x-1-2 {padding: 0 !important;}
	.grid1 {margin-bottom: 5%;}
	.grid2 {padding-top: 0%;}
}

That should even the space of two grids and its images on all screen width.

Hope it helps, Cheers!

[sandra.iParticipant]

Hi

That didn’t quite work –

laptop – too much space between the images, they need to be about 30px apart

ipad – the second row of the second grid is slightly pushed down

iphone – can I have 2 images across instead of 1 please

Thanks

[Paul RModerator]

Hi,

While we are happy to help with the occasional quick tweak here or there, we are well into the custom development realm, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[sandra.iParticipant]

Hi

Thanks for your reply. I cannot see how this going well into the realm of custom development. I am simply trying to layout an element which is present in your theme. I have had help from you already and this is just a case of finalising this process. I would be grateful if you could help me complete this last bit for my website.

[JoaoModerator]

Hi Sandra,

laptop – too much space between the images, they need to be about 30px apart >

That would require you trying to find the perfect size for margin and image sizes by trying and tweaking the code already provided, it is possible, but it doesn´t demand some technical skills, is simply patience and trying until you achieve it. You would need to do this yourself. In my opinion it looks good as it is.

ipad – the second row of the second grid is slightly pushed down

Please verify if your images have the exactly same size, it seems like some images are different from others.

iphone – can I have 2 images across instead of 1 please

Please add the following code to Appereance Customizer Custom CSS

@media (max-width: 480px){
.x-block-grid.four-up>li {
      width: 47%;
    margin: 1.3%;
    margin-top: 1% !important;
}}

As my colleagues mentioned, we are able to help you some tweaks but if you are looking to some exactly pixel perfect layout you will need to research on your own or consult with a private developer.

Thanks for understanding,

Joao

[Author]

Posts