[Resolved] Space Between Buttons on Mobile

[Mark]

Using GP Premium

Please see my hero header. The buttons look great.

When on mobile, the buttons touch. Is there an easy line to add when I edit the element to add some spacing on mobile?

Thanks

[Leo]

Hi there,

Give this CSS a shot:

@media (max-width: 768px) {
    .page-hero a.button {
        margin-top: 5px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Mark]

That didn’t do it.

[Leo]

It should. However I’m not seeing the code being added.

Any caching plugin?

[Mark]

I added and then took off. Let me add again and delete the cache.

[Leo]

Have you added it? I still don’t see it in the source code so maybe some caching issue going?

[Mark]

Yep, I added it and deleted cache. It’s there now.

[Leo]

It’s still not there unfortunately. You can right click on your site and click View page source and search keyword .page-hero a.button and confirm that it’s not there.

When it’s there (I tested by using browser inspect), it should look like this:
https://www.screencast.com/t/jT3ut9Q0zCn6

How are you adding it?

[Mark]

Is my code for the element ok?

[Mark]

I double-checked and this is added to my CSS in the customizer:

@media (max-width: 768px) {
.page-hero a.button {
margin-top: 5px;
}
}

[Leo]

Still not showing unfortunately.

Any chance you can disable all plugins except GP Premium?

[Mark]

So much of my site uses WP Show Posts. I don’t really want to disable it. I believe it uses its own buttons. Could that be it?

[Leo]

Shouldn’t be related to WP Show Posts so you can keep that activated.

Can you check with your host to make sure there isn’t any server cache at all?

The code simply isn’t showing up in the source and I really don’t see any other reasons.

[Mark]

I cleared the kinsta cache. I have autooptimze. Is there a setting in there I should toggle?

[Leo]

Can you disable both Kinsta cache and Autopmize?

Do you have any other CSS added in the Additional CSS field?

[Author]

Posts