[Resolved] Customization help

Home Forums Support Customization help

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
    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
    Staff
    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
    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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.