[Resolved] Help with Dispatch site library design on mobile

[Rachel]

Hi,

I installed the Dispatch site design to my site, but I have a problem with how the home page displays on mobile.

The bottom WP-show-posts shortcode looks fine on tablet and desktop, but on mobile the post headings are not displayed and there is a large gap between each image/excerpt. I can’t work out what is missing in the code – are you able to assist?

Thanks,
Rachel

[David]

Hi there,

can you disable Autoptimize so i can see whats messing with the CSS.

[Rachel]

Hi, I have deactivated Autooptimize..

Thanks,
Rachel

[David]

Its this CSS in Customizer > Additional CS:

/* WPSHow Posts image float left on mobile */
@media (max-width: 767px) {
    .wp-show-posts-image.wpsp-image-left {
        float: left;
        margin-right: 1.5em;
    }
}

Do you need that ? If so we can try and exclude it from the wpsp-align layout.
Let me know.

[Rachel]

That is odd it is causing an issue, as I use that code on a number of different sites without any problems. I use it to force the WP-show post image to sit to the left and the text not wrap around the image on mobile. Is there another way to manage this?

[David]

Dispatch uses some custom CSS to create those wpsp-align layouts which does the fancy side layout on desktop and stacked on mobile.

You could add this CSS to stop your other CSS from affecting them:

@media (max-width: 767px) {
    .wpsp-align .wp-show-posts-image.wpsp-image-left {
        float: none;
        margin-right: inherit;
    }
}

Or you could remove your CSS and to use the Dispatch align style by wrapping your shortcodes in a DIV like so:

<div class="wpsp-align">
    <!-- shortcode here -->
</div>

[Rachel]

Ok, the div is a good option when adding in content, but it doesn’t seem to help for the sidebar widget, which now has the title sitting under the image, despite me adding the wpsp-align as a class for the widget. It isn’t a huge deal but looks nicer when it is aligned 🙂
Thanks.

[David]

Aah i forgot about those.
In that case keep your CSS, add my CSS to eliminate the front page issue. And remove the

from the sidebar…. sorry should of remembered the sidebar…

[Rachel]

Ok great, all good. Thanks so much for your help.

[David]

You’re welcome

[Author]

Posts