Make summary block look like blog page

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

Hello all. I'm trying to duplicate the main landing page, which is a blog page, by using a summary block. The summary block style doesn't match the blog page, so I'd like to use code to force the summary block to look like a blog page in terms of font type and font size and the "read more" link, if possible. Does anyone have any thoughts as to how to force summary blocks to take on the same appearance as blog pages? Thank you in advance for any suggestions!

Can you share link blog page & link to page where you use summary? We can help easier

Thank you, Tuanphan. Here is the existing blog home page: https://www.thetechnologyletter.com

And here is a version of that blog page as a summary block: 

https://www.thetechnologyletter.com/posts-members

As you can see, the title text is not the same font, it is not automatically capitalized, the read more button is not the same, the time stamp is not the same, etc. The question is how to tweak the summary block to make it look like the main blog page, and ideally, to make it look identical.

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

On 3/3/2022 at 8:20 AM, tuanphan said:

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

 

Tuanphan, thank you very much! This is a big help. I notice that the "read more" link still doesn't look like it does on the main page version. It's smaller, and I'd like to get rid of the arrow that's attached to it. Also, I wonder if there's a way to get the date above the title, and more space between Read More and the next post. Side-by-side comparison, the desired look on the left-hand side, the work-in-progress on the right-hand side:

I've been trying to do the same thing. I have 4 pages with curated blog posts and I want the summary block to look like my blog page and almost fill the page width. I tried the code on this thread, as well as several others, but no luck so far. Tuanphan can you help?

Page I want the others to look like: https://www.kennywallace.co.uk/case-studies

A page with a summary block I want to look like my blog page: https://www.kennywallace.co.uk/top-6-case-studies

I've also attached screen shots for reference.

On 10/24/2023 at 11:15 PM, KennyWW said:

I've been trying to do the same thing. I have 4 pages with curated blog posts and I want the summary block to look like my blog page and almost fill the page width. I tried the code on this thread, as well as several others, but no luck so far. Tuanphan can you help?

Page I want the others to look like: https://www.kennywallace.co.uk/case-studies

A page with a summary block I want to look like my blog page: https://www.kennywallace.co.uk/top-6-case-studies

I've also attached screen shots for reference.

Try this CSS code to increase width of summary block page

[data-section-id="64f9c5472378c302c29901fb"] .content-wrapper {
    margin: 0 !important;
    max-width: 100% !important;
}