[Resolved] Customization help

[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!

[Tom]

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 🙂

[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!

[David]

Hi there,

try adding this CSS:

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

[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!

[Tom]

Hi there,

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

[William]

Hi Tom, Just linked. Thank You

[David]

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

[William]

Hi, David, I’ve disabled it.

[William]

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

[Leo]

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

Can you confirm?

[William]

Hi Leo,

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

Thank You

[Leo]

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;
    }
}

[William]

Hi Leo, it worked! Thank You so much!

[Leo]

No problem 🙂

[Author]

Posts