Docs

[nylelevi]

Hi X, I wonder if you can help me with this

I have a block grid on this page: http://nyle.medialam.com/sectors/

What I would like to do with it is have all of the images touching each other without any gaps and have the whole grid centered on the screen

I am attaching a screenshot of what I am trying to achieve:
http://i.imgur.com/UD76Pzn.jpg

Thanks

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

li.x-block-grid-item img {
    width: 100%;
     margin: 0;
}

Hope that helps.

[nylelevi]

Hi There

That code has closed all the gaps nicely so thanks for that but unfortuneately it still isnt centering on the page.

Any ideas for that?

Thanks

[Christopher]

Hi there,

Please add this code :

.x-block-grid.three-up>li {
    width: 33%;
}

To resize wrapper, add following code as well :

ul.x-block-grid.three-up {
    width: 80%;
    margin: 0 auto;
}

Hope it helps.

[nylelevi]

Great thats working! Thanks for your help

[nylelevi]

Sorry although the issue has been fixed for this page, it has caused a block grid on another page to act differently. Is there a way for me to target this specific grid so that the code only applies to this one?

Thanks

[Joao]

Hi There,

You can add .page-id-362 in front of every code above provided. It should look like this:

.page-id-362 .x-block-grid.three-up>li {
    width: 33%;
}

.page-id-362 li.x-block-grid-item img {
    width: 100%;
     margin: 0;
}

.page-id-362 ul.x-block-grid.three-up {
    width: 80%;
    margin: 0 auto;
}

Hope it helps

Joao

[nylelevi]

Thanks again!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts