Essential grid height & button border

[vojtechzikmund]

Hello there,

I’m working on my site and could get my head around why:

1. I cannot set minimum and maximum height for my essential grid row. I think I tried everything on this forum including the themepunch forum. Nothing seems to work in my scenario.

2. I cannot see border around text

[thai]

Hi There,

I could see that you’re using the cache plugin. I recommend you to purge all the caches and clear all the browser cache as well then check again. Because the border around the Více info / Objednat se is displaying fine on my end:

@vojtechzikmund

It’s down at the section “Semináře”. I would like to have them set to maximum height of 500px. I will be adding at least 6 more rows, but I don’t like continuing without solving it first.

Please update your custom CSS from:

.equal-seminare {
    min-height: 500px !important;
}

To:

.equal-seminare {
    min-height: 500px !important;
    display: flex !important;
    flex-flow: wrap;
}

Hope it helps

[vojtechzikmund]

Ahh, it seems like you were looking at the homepage. The link I have sent is different version of the homepage and I’m trying to recreate the grid with essential grid, because of the better meta abilities (I want to have lightbox on the button click).

[thai]

Hi There,

The border settings of button is overrided by the default CSS of Essential Grid plugin.

I’ve edited the skin and enabled the Force !important in styles option and the border is working fine now:

You can change the color of border under Style > Border tab:

Regards!

[vojtechzikmund]

Thank you very much! How can I set the row of the two grid to be set to 500px though?

[friech]

Hi @vojtechzikmund,

@vojtechzikmund

How can I set the row of the two grid to be set to 500px though?

Please follow the solution provided here.

Hope it helps,
Cheers!

[vojtechzikmund]

It does stay at 500px, but it breaks when you go below ~1040px, and then on mobile… on mobile the height is like 340px… I’m including screenshot.

I added this css:

.esg-entry-media-wrapper, .esg-entry-cover {
    max-height: 500px !important;
}
 
.esg-cc {
    top: 0 !important;
}

@media screen and (max-width: 768px) {
 
	.esg-entry-media-wrapper, .esg-entry-cover {
		max-height: 500px;
	}
 
}

[friech]

Hi @vojtechzikmund,

Try adding a min-height on it.

.esg-entry-media-wrapper, .esg-entry-cover {
    max-height: 500px !important;
    min-height: 500px !important;
}
 
.esg-cc {
    top: 0 !important;
}

@media screen and (max-width: 768px) {
 
	.esg-entry-media-wrapper, .esg-entry-cover {
		max-height: 500px;
		min-height: 500px !important;
	}
 
}

Thanks,

[vojtechzikmund]

Okay it seems to do the trick, but I’m still getting awkward padding at the bottom of the background image. Can you see that? The media fit is set to cover, but it certainly doesn’t cover and doesn’t scale properly with the box.

[paul.r]

Hi,

Try adding this code as well.

.esg-entry-media {
    padding-bottom: 100% !important;
}

Hope that helps

[vojtechzikmund]

That worked like a charm, thank you

I have another question though, see secure note please.

[rad]

Hi there,

It’s scaling properly on my end, the issue that I’m seeing is the spacing that you applied and it’s too big for mobile.

Exampe, if mobile view is 480px, minus 200px (100px left and right), with 75% maximum width then the resulting width available for content is 480px - 200px = 280px - 25% = 210px. How about just setting those padding to zero and max-width to 100%? Then just use CSS to control them, example,

@media (min-width: 980px) {
.eg-lightbox-post-content-inner {
    padding: 25px 100px 50px 100px !important;
    min-width: 75% !important;
}
}
@media ( max-width: 979px ) {
.eg-lightbox-post-content-inner {
    padding: 25px !important;
    min-width: 100% !important;
}
}

Hope this helps.

Thanks!

[vojtechzikmund]

Thank you sir! Cannot be done better

[ruenel]

You are most welcome!

[vojtechzikmund]

Just realised that the font used in the lightbox is different than I use on the rest of the page. I have the font set right in theme options etc. and yet the lightbox still uses font “system-ui”. Why?

[rad]

Hi @vojtechzikmund,

The theme’s font is not directly integrated to lightbox font, it has a separate implementation. Plus, it’s connected to post content through Ajax, the reason it’s slow and the other parts are stripped away (like header and footer where fonts are declared).

And with ajax content, the lightbox downloads it so it will appear slower compared to contents already available upon page loads (like images). If you wish, you can also apply the font through CSS,

Example,

.eg-lightbox-post-content {
font-family: Arial;
}

As for slow loading, there are many contributing factors like the internet, content size, optimization, and so on. There is no workaround for that setup as of now.

Thanks!