Docs

[mathijs84]

Hi guys,

I have Essential Grid on http://www.streamads.work-planning.com/channels/

To make it look good on mobile i use this CSS

@media (min-width:0px) and (max-width: 870px) {
	.esg-cc.eec > .esg-center.esg-flipdownout {
	    position: absolute;
	    top: 10%;
		line-height: 20px;
    font-size: 24px;
	}
}

I would like to make sure all the titles are always centered. On mobile for example, some of the titles are not centered.

Can we add something to make that correcT?

[Christian]

Hey there,

Please add width:100% to your code so it will be

@media (min-width:0px) and (max-width: 870px) {
.esg-cc.eec > .esg-center.esg-flipdownout {
    position: absolute;
    top: 10%;
    line-height: 20px;
    font-size: 24px;
    width: 100%;
}
}

Hope that helps. 🙂

[mathijs84]

thanks, i also changed the font size to 20px.

If you check on mobile, you see the text is aligned a little to the right instead of center.

[Joao]

Hi There,

I have added 70px of padding on the right and it seems to be centered now:

Please use the code below:

@media (min-width:0px) and (max-width: 870px) {
.esg-cc.eec > .esg-center.esg-flipdownout {
    position: absolute;
    top: 10%;
    line-height: 20px;
    font-size: 24px;
    width: 100%;
    padding-right: 70px;
}
}

Hope that helps,

Joao

[Author]

Posts