[Resolved] Help with Dispatch site library design on mobile

Home Forums Support Help with Dispatch site library design on mobile

  • This topic has 9 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1371855
    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

    #1371874
    David
    Staff
    Customer Support

    Hi there,

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

    #1371896
    Rachel

    Hi, I have deactivated Autooptimize..

    Thanks,
    Rachel

    #1371938
    David
    Staff
    Customer Support

    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.

    #1371959
    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?

    #1372031
    David
    Staff
    Customer Support

    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>
    #1372086
    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.

    #1372090
    David
    Staff
    Customer Support

    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…
    #1372789
    Rachel

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

    #1373023
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.