Archived topic

Archive Page Text Overflow

9 replies · Started by Zad on July 17, 2018

Viewing posts 1–10 of 10

July 17, 2018 at 11:15 pm #626266

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.

July 18, 2018 at 5:22 am #626477

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;
    }
}

July 18, 2018 at 7:04 am #626560

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.

July 18, 2018 at 10:07 am #626790

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

July 18, 2018 at 4:02 pm #627015

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;
}

July 18, 2018 at 4:35 pm #627040

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.

July 18, 2018 at 4:37 pm #627041

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.

July 18, 2018 at 4:52 pm #627046

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

July 18, 2018 at 6:08 pm #627065

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

July 19, 2018 at 1:01 am #627224

Thats great. Glad to be of help.

This archived topic is closed to new replies.

Start building better websites today.