Sign inGet GeneratePress One

Archived topic

Dispatch Theme GeneratePress Image fix on mobile

1 reply · Started by Wayne on April 15, 2021

Viewing posts 1–2 of 2
#1734982

So on desktop, the dispatch theme looks absolutely beautiful.
But on mobile, the middle section of the theme looks terrible.

https://imgur.com/a/wPfgwIm

If you notice the screenshot, the image on mobile becomes a long rectangle. How do I fix this and make it look like a square or rectangle like the other pictures?

#1735064

Hi there in Customizer > Additional CSS look for the following CSS rules:

@media (min-width: 420px) {
.wpsp-align .wp-show-posts-image {
    margin-bottom: 0;
}
}

@media (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .wpsp-align .wp-show-posts-inner>div {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 768px) and (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
        margin-right: 1.5em;
    }
}

There are 3 instaces of min-width: 420px; - change each of them to a greater value - eg. 520px

This archived topic is closed to new replies.