How Do I Update Blog Roll Styling Using CSS

Site URL: https://www.joshuaschweigert.com/

I'm seeing help updating my blog page to look match the home page styling feed summary block.

Home Page: https://www.joshuaschweigert.com/

Blog Page: https://www.joshuaschweigert.com/blog

In addition, I'd love assistance getting the summary cards to be all the same length. Thank you so much!

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    padding: 20px;
}}

10 hours ago, tuanphan said:

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    padding: 20px;
}}

Receiving an RBG color function error when adding the code. How do I resolve?

13 hours ago, thejschweigert said:

Receiving an RBG color function error when adding the code. How do I resolve?

Try this new code

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgba(100, 100, 100,0.1) !important;
    padding: 20px;
}}

The new code seemed to fix the aesthetics but changed from 3 column to 1 column.

Nvm, looks like i got it to work. Thank you!

Hello, it's me again! How do I create the same card effect on the home page using the summary widget?

On 11/10/2021 at 7:54 AM, thejschweigert said:

Hello, it's me again! How do I create the same card effect on the home page using the summary widget?

I see both same here. Can you explain?

The cards on the blog page are the same size but the cards for the summary widgets are different sizes. I'd like for the summary widget to appear like the post roll on the blog page.

I'm using summary widget w/ grid view. See attached.

On 11/11/2021 at 11:01 PM, thejschweigert said:

The cards on the blog page are the same size but the cards for the summary widgets are different sizes. I'd like for the summary widget to appear like the post roll on the blog page.

I'm using summary widget w/ grid view. See attached.

Hi,

You mean make them same height?

Yep, just like the blog roll page.

Like this: https://www.joshuaschweigert.com/blog