Increase Image Size Block Grid

[Crystal Hamilton]

Hello,

I need to increase the size of right block grids for block style 3. I need them to fill out space. I have a before and after screenshot below. Need to increase size for 3 blocks only. Please help.

Thanks!

[Veena]

Can you pls share the specific page link?

[Crystal Hamilton]

Hello Veena,

I am currently working offline on the website for a client.

[Crystal Hamilton]

I’ve recently migrated the site to the live server. Here is the link: http://www.kidfitstrong.com/home/

I am reconfiguring content, so please let me know if you need me to log out.

Thanks

[Crystal Hamilton]

Here’s the updated screenshot…

I need grids to look like the screenshot below. How can I accomplish this with CSS?

Thanks.

[Raghavendra]

Will need the site to be working to provide exact CSS. Currently the site says it is under construction. Looks like we need the login to see the page. Pls provide the same in a private message here.

[Crystal Hamilton]

This reply has been marked as private.

[Crystal Hamilton]

We have customers and sponsors already visiting the page for more information. Please don’t disable maintenance mode if you can help it.

If you absolutely have to, I understand.

Thanks

[Veena]

Pls use the below custom CSS in plugin settings > custom CSS and check –

.lae-grid-item .lae-module-1.format-standard.has-post-thumbnail.ast-article-single {
    padding: 0;
}

[Crystal Hamilton]

Hello,

That helped to increase the size on the left part of the grid, but I need to also increase the size of the 3 grid boxes. How do I increase the 3 grid boxes image size to match the length of the post on the left side?

[Veena]

Pls use the below custom CSS and check-

.lae-module-3.lae-small-thumb {
    padding-bottom: 95px;
}
.lae-module-3 .lae-module-thumb {
    width: 180px;
}
.lae-module-3 .lae-entry-details {
    margin-left: 200px;
}
.lae-module-3.lae-small-thumb .entry-title a {
    font-size: 14px;
}

Pls adjust the values according to your requirement.

[Crystal Hamilton]

This worked Perfect!

The only issue now is that with adding the CSS code, my post grid for another section is off in the chrome browser.

Here is what it looks like now. The other photo shows how they look in Safari browser which is the correct way.

Help please.

Thanks

[Veena]

Pls modify the above custom CSS to this –

.home .lae-module-3.lae-small-thumb {
    padding-bottom: 95px;
}
.home .lae-module-3 .lae-module-thumb {
    width: 180px;
}
.home .lae-module-3 .lae-entry-details {
    margin-left: 200px;
}
.home .lae-module-3.lae-small-thumb .entry-title a {
    font-size: 14px;
}
.home .lae-grid-item .lae-module-1.format-standard.has-post-thumbnail.ast-article-single {
    padding: 0;
}

This custom CSS applies only for home page.

[Crystal Hamilton]

I have applied the CSS and the problem still exist on chrome browser.

[Veena]

The only issue now is that with adding the CSS code, my post grid for another section is off in the chrome browser.

I don’t see any such issues with chrome browser.

[Author]

Posts