[Resolved] Archive Page Text Overflow

[Zad]

Hi.

I’m trying to keep my excerpt summary text in a block and prevent it from overflowing in the archive pages. I have an image showing this happening. https://imgur.com/a/riiGq34

I also did a bit of digging on this forum to see if anyone encountered a problem like this before, and Leo suggested that this code by used,

.entry-summary {
    margin-top: 0.7em;
}

While did this bring up the text closer to the title, it wasn’t always enough to prevent the overflow. How can I keep the text aligned? Is it also possible to bring the category and the # of comments below the aligned excerpts?

Thanks in advance.

[David]

Hi there,

you can try adding some bottom margin to the image:

@media (min-width: 768px) {
    .post-image-above-header .inside-article .post-image {
        margin-bottom: 50px !important;
    }
}

[Zad]

Hi,

That code seems to only work when the featured image is below the title. But when it’s above the title (as pictured above in the imgur screenshot), it doesn’t seem to do anything.

[David]

I edited the code above, can you try that, also added a media query so it doesn’t effect the layout on mobile.

[Zad]

That doesn’t seem to do anything, unfortunately. The only code that works is the

.entry-summary {
    margin-top: 0.7em;
}

Here’s what it currently looks like when it overflows (https://imgur.com/a/hXtLAPf) and here’s what the settings are on the customizer (https://imgur.com/a/7VeUo9M).

Also, if this helps… here’s my current Simple CSS code,

.site-logo img {
    width: 70px;
    height: 70px;
}

.single-post .entry-header {
    text-align: center;
}

h1.page-title {
    text-align: center;
}

.main-navigation ul ul {
    width: 100%;
}

@media (min-width:769px) {
    .single.one-container .site-content {
        padding-left: 270px;
        padding-right: 270px;
    }
}

blockquote {
    background-color: #f4f4f4;
    border-left: 2px solid #58bad6;
    font-size: 16pt; /* set desktop size */
    font-style: normal;
    padding-left: 25px;   
}

@media (max-width: 768px) {
    body {
        font-size: 19px;
    }
    blockquote {
        font-size: 16px; /* set Mobile size */
    }
}

.comments-title {
    display: none;
}

.comment-body {
    padding: 10px 0;
}

.comment .children {
    margin-top: -10px;
}

.comment-content {
    margin-top: 10px;
}

.entry-summary {
    margin-top: 0.3em;
}

[David]

Can you add the code i provided and let me know. You may need to increase the 50px to a higher number to see the effect. But let me know.

If not ill find an alternative.

[Zad]

Hi,

Yes, I added it and tried increasing it to 1000px to see an exaggerated effect. No use unfortunately. Totally alright though if nothing works, I can just cut the summary excerpts to try to fit all the content in.

[David]

Thats odd, maybe the autoptimize cache needs clearing? Made those changes in the browser inspector and they worked just fine. Let us know if you want to give it another shot. I don’t like to think something may have beaten us lol

[Zad]

Oh wow. I think it was simply the cache that needed to be refreshed. Seems to have worked! Thanks!

[David]

Thats great. Glad to be of help.

[Author]

Posts