Help with Dispatch site library design on mobile

Hi there,

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

Hi, I have deactivated Autooptimize..

Thanks,
Rachel

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.

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?

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>

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.

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

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

You're welcome