Docs

[mathijs84]

Hi guys,

My first go with essential Grid. Not quite getting the hang of it but getting there.

I have a grid setup here: http://www.streamads.work-planning.com/channels/

Few questions:

1: I just can’t seem to get the text layers centered. how can u make both the title and the hover item centered??

2: Is it possible to make the background black and only show the background image when you hover over the item??

3: Is it possible to have a small line between the skins, like this:
http://prnt.sc/axwb37

[mathijs84]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue;

1] To make it centered, please edit the ess grid skin and click on the layer. Go to Style > Spacing and set the display as Block. Set your margins and that’s it.
http://prntscr.com/ay5egh

2] To make the background go black and only show the image once you hover it, please go to the Layout Composition and adjust the shadow for the cover.
http://prntscr.com/ay5fgx

3] And to add a border around the items, please go to Layout Composition > Spaces and set the borders.
http://prntscr.com/ay5fz3

Hope this helps.

[mathijs84]

Thanks i got it how i want it now..

Only thing is, when you make the screen smaller, the text layers don’t resize very well. The text is not in the skin anymore.

Is there a way to fix that?

[Rad]

Hi there,

Due to too much line-height, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media (max-width: 979px) {
.esg-cc.eec {
top: 10px !important;
}
.esg-cc.eec > .esg-flipdownout {
line-height: 40px;
margin-top: 20px;
font-size: 35px;
}
}

Hope this helps.

[mathijs84]

Yup only thing remaining is this:

When you make the browser smaller, just before the skins begin to break to rows of 1, but still have two together, the hover text falls out of the image. So you can;t read it. Cant we make the hover text also in the center ?

[Christian]

That is technically possible but would require custom development. Please use the code below as a guide.

@media (min-width:640px) and (max-width: 870px) {
	.esg-cc.eec > .esg-center.esg-flipdownout {
	    position: absolute;
	    top: 15%;
		line-height: 40px;
	}
}

Further customizations from here would be getting into custom development, 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.

[Author]

Posts