[Resolved] Customization help

Home Forums Support Customization help

This topic contains 14 replies, has 4 voices, and was last updated by  Leo 1 week, 3 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1286122

    William

    Hello,

    I’m using the Dispatch theme and have some problems with the page hero on the mobile version. I managed to create spaces between each post in the page hero on the desktop and tablet versions. However on mobile, the page hero posts are still connected together. Any way I can fix this?

    Here’s the CSS I’m using:

    .page-hero.wpsp-grid .wp-show-posts {
    grid-gap: 5px;
    background: #fbfbfb;
    border: 0px solid #fbfbfb;
    }
    .page .entry-header {
    text-align: center;
    }
    .page-hero.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 550px;
    }
    .sidebar .widget .widget-title {
    text-align: center;
    }
    .page-hero.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 272px;

    Thanks in advance!

    #1286516

    Tom Lead Developer

    Hi there,

    The grid is only applied on desktop, so you should just be able to use margin to separate them on mobile.

    Let me know 🙂

    #1286665

    William

    Hi Tom,

    So I went to customizer > layout > container > Mobile content padding and when playing around with the padding the whole page hero grid adjusts not the individual post within the grid. So basically what I want is to have spaces between posts on the page hero in mobile version.

    Thank You!

    #1287214

    David Customer Support

    Hi there,

    try adding this CSS:

    @media (max-width: 599px) {
        .page-hero.wpsp-grid .wp-show-posts article {
            margin-bottom:  5px !important;
        }
    }
    #1287552

    William

    Hi David,

    I added the CSS and it doesn’t seem to change anything. If you go to https://gpsites.co/dispatch/ on mobile, the page hero posts are connected together. I want to separate them if possible maybe by 3px. I was able to do that on desktop and tablet, but have trouble with mobile.

    Thank You!

    #1287815

    Tom Lead Developer

    Hi there,

    Any chance you can link us to your site? The CSS David provided should work.

    #1288170

    William

    Hi Tom, Just linked. Thank You

    #1288554

    David Customer Support

    Can you disable Autoptimize so i can take a look at why it isn’t working

    #1288917

    William

    Hi, David, I’ve disabled it.

    #1288993

    William

    I also tried the CSS after disabling Autoptimize, but still don’t see any effects. Thank You

    #1289129

    Leo Customer Support

    I just checked the source of Additional CSS and not seeing David’s CSS being added at all.

    Can you confirm?

    #1289314

    William

    Hi Leo,

    Sorry I added it then deleted cause it didn’t work. I’ve added it back.

    Thank You

    #1289420

    Leo Customer Support

    Hmm still getting overwritten.

    Can you try this instead?

    @media (max-width: 599px) {
        body .page-hero.wpsp-grid .wp-show-posts article {
            margin-bottom:  5px !important;
        }
    }
    #1289487

    William

    Hi Leo, it worked! Thank You so much!

    #1290576

    Leo Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.