Archived topic

Customization help

14 replies · Started by William on May 15, 2020

Viewing posts 1–15 of 15

May 15, 2020 at 10:59 am #1286122

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!

May 15, 2020 at 4:45 pm #1286516

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 :)

May 15, 2020 at 8:23 pm #1286665

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!

May 16, 2020 at 7:45 am #1287214

Hi there,

try adding this CSS:

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

May 16, 2020 at 10:38 am #1287552

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!

May 16, 2020 at 2:57 pm #1287815

Hi there,

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

May 16, 2020 at 11:55 pm #1288170

Hi Tom, Just linked. Thank You

May 17, 2020 at 7:41 am #1288554

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

May 17, 2020 at 10:17 am #1288917

Hi, David, I've disabled it.

May 17, 2020 at 11:36 am #1288993

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

May 17, 2020 at 1:21 pm #1289129

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

Can you confirm?

May 17, 2020 at 5:37 pm #1289314

Hi Leo,

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

Thank You

May 17, 2020 at 9:16 pm #1289420

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

May 17, 2020 at 11:11 pm #1289487

Hi Leo, it worked! Thank You so much!

May 18, 2020 at 10:38 am #1290576

No problem :)

This archived topic is closed to new replies.

Start building better websites today.