Docs

[stuartrowens]

Site: test4.stuartrowens.com

The essential grid looks great on a desktop, but on mobile there are small white lines between each block. Any idea how to get rid of them?

[Christopher]

Hi there,

Please check the attachment, this is how it looks on my end.
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[stuartrowens]

Thanks for checking on this for me. It seems the issue is showing up only on mobile devices. I’ve included a screenshot from my iPhone, but I’m not able to replicate the issue by reducing my browser window. The problem also occurs on my client’s HTC phone.

The goal would be for those tiny white lines to disappear on mobile.

Thanks!

[Friech]

Hi There,

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

@media (max-width:  767px) {
	.esg-grid .mainul li.eg-henryharrison-wrapper {
		 margin-top: -1px;
	}
}

Hope it helps, Cheers!

[stuartrowens]

Thanks for the feedback. That doesn’t seem to have affected the gap. Any other ideas?

[Paul R]

Hi,

You can try this code instead.

@media (max-width:  767px) {
	.esg-grid .mainul li.eg-henryharrison-wrapper {
		 margin-top: -1px !important;
	}
}

Hope that helps.

[stuartrowens]

Paul,

Thanks. That doesn’t seem to have helped, either.

[Lely]

Hi There,

Upon checking the code of your site, above CSS is not added. In case you have added it already, please try to clear some cache if you have caching plugin. We might be seeing cache content. Although, I did check it too on my mobile, the those lines are not visible. See this:

[stuartrowens]

Sorry, since this post I’ve moved the site to its permanent domain, empatheticmedia.com.

On that site the lines still show on my iPhone with the code added.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.esg-grid .mainul li.eg-henryharrison-wrapper .esg-media-poster {
    transform: none !important;
}

Let us know how this goes!

[stuartrowens]

Boom! That did it! Thank you.

[Joao]

Glad to hear it!

Joao

[Author]

Posts