[sandra.iParticipant]

Hi

Thanks for your reply and for your continuing help, Its much appreciated.

– laptop: I wasn’t really looking for a pixel perfect scenario, i just wanted the gap to be smaller – the gaps looks ideal on the ipad version, I estimated the gap to be about 30px, but anything close to that would be great.

ipad – yes the images are all the same size everywhere, I’m guessing its some kind of margin/padding issue

iphone – looking good now, thanks!

[FriechModerator]

Hi There,

You seems applied the padding-left: 1.5%; on the grid2 instead of the right column, please correct that.

Actually we need to adjust that 1.5% value now since we are adjusting the width of the grid items, yes we need to adjust the grid width and its margin proportionally if we need it to get closer. Lets adjust that padding to 0.5% and make sure you applied it on the columns.

Only then you can add this on your custom CSS

/*Get the block grid items closer*/
/*one row - 8 column*/
@media (min-width: 980px) {
	.x-block-grid.grid1>li.x-block-grid-item,
	.x-block-grid.grid2>li.x-block-grid-item {
		width: 23.5%;
		margin-right: 2%;
	}
	.x-block-grid.grid1>li.x-block-grid-item:last-child,
	.x-block-grid.grid2>li.x-block-grid-item:last-child {
		margin-right: 0;
	}
}

/*2 row - 4 columns*/
@media (max-width: 979px) {
	.x-block-grid.grid1>li.x-block-grid-item,
	.x-block-grid.grid2>li.x-block-grid-item {
		width: 49%;
		margin-right: 2%;
		margin-top: 2%;
	}
	.x-block-grid.grid1>li.x-block-grid-item:nth-child(2n),
	.x-block-grid.grid2>li.x-block-grid-item:nth-child(2n) {
		margin-right: 0;
	}
}

/*4 row - 2 columns*/
@media (max-width:  767px) {
	.x-block-grid.grid1 {
    	margin-bottom: 0;
	}
}

/*keep it 4 row and 2 columns on small screen*/
@media (max-width:  480px) {
	.x-block-grid.grid1>li.x-block-grid-item,
	.x-block-grid.grid2>li.x-block-grid-item {
    	margin-left: 0;
    	margin-right: 2%;
	}
}

Make sure you copy that entire css code.

This should make the grid items closer, and space out evenly. If this did not do anything, try adding it on top of your custom CSS.

Just to let you know the site respond very slow with the developer tool and it hindering us but we’ll carry on, maybe there are syntax errors on your custom CSS. That might also be the reason why the previous css we provided did not work. If you can check your entire custom CSS here: http://csslint.net/ and resolve the errors that would be great.

Cheers!

[sandra.iParticipant]

You’ve done it! It looks great everywhere, thanks so much for your help.

I’ve migrated my site from one domain to another, and now its taking ages to load, I can’t quite figure out what’s happened. I’ve run the site through webpagetest.org and found that it takes about 40s to get to the first byte. It’s also making my work on wordpress very difficult. Do you have any suggestions as to where I should be looking to fix this issue?

Thanks

[JoaoModerator]

Hi There,

To ensure everything was done properly, please describe the process you used to do the migration.

Also please provide:

OLD DOMAIN

+

WP Admin credentials for the new domain.

Thanks

[Author]

Posts