Mobile and tablet settings for buttons on pages

Using Astrid, created buttons with links on multiple pages and looks/works fine on desktop view but does not match on mobile and tablet views - the buttons are appearing on each page differently, none are aligning side by side, some are overlapping, is there a code to fix this? thank you

Hello there,

Please provide us a link to the related page of your site, so I can check and inspect the issue directly. It seems likely we could use simple extra CSS solution for that.

Regards,
Kharis

Hi,

Thanks for the quick response! Here’s a link: https://islamplainandsimple.com/?page_id=89

If you click through using the buttons at the bottom you’ll all see the related pages (5 in total have these buttons).

Thank you!

Hello there,

Firstly add a custom class name to your column from Advanced option.

50

Update page.

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 781px) {
      .wp-block-columns > div { 
        flex-basis: unset !important;
        display: table;
        float: left;
      }
    }

Regards,
Kharis