[Support request] Blog archives page and mobile display

[Jamie]

Hi!

I made an attempt earlier to amend my blog roll/archive page display so the post image was on the left and the excerpt on the right. I amended the width to 250px and clicked to left alignment which worked fine.
However, I want the mobile and tablet displays to keep with what it was before – as in width and height set to ‘Auto’ and alignment at centre.
With the amendments I want to desktop, this, in turn, makes tablet and mobile views look bad.
Is it possible to have this setting just for desktop and have the mobile and tablet views set to default? (as in auto for height and width and centre alignment).

Thanks!

[Tom]

Hi there,

In that case, it’s likely better to use CSS to resize your image. Instead of the image settings, try this:

@media (min-width: 769px) {
    .post-image img {
        max-width: 250px;
    }
}

Then on mobile, the alignment should center and the width should be 100%.

Let me know 🙂

[Jamie]

Hi Tom,

Can you please also include in the above code the code to make the image align to the left, and also reduce the excerpt to 40 words? The current code above only shrinks the image into the centre.

Thanks

[David]

Hi there,

you could try this CSS instead of what Tom provided:

@media (min-width: 768px) {
    .post-image {
        width: 250px;
        float: left;
        margin-right: 1em;
        margin-bottom: 1em;
    }
}

Reducing the word count can be done from within the Customizer > Layout > Blog > Excerpt.

[Author]

Posts