Astrid not displaying correctly on mobile devices

My website that uses the Astrid theme fails to display correctly on mobile devices

The website address is… Skywatchnorthernireland.com

Thank you

Hi,

Thank you for raising this topic.

I checked your site and currently the home page is empty and only shows header image with text and button in it. To make it shows properly on mobile devices, you’ll need to add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .small-header {
        display: none;
      }
      
      .home .header-image {
        height: 100vh;
      }

      .home .header-image .large-header {
        display: block !important;
        object-fit: cover;
        height: 100%;
        width: 100%;  
      }  
    }

Hope that helps.

Regards,
Kharis
aThemes Support

Thank You Kharisblank, This worked perfectly.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support