No preview image when posting link to social media - only a giant, white square

Site URL: https://acerintegration.com/

Can anyone help me? 
I had to use the below code because my header images weren't shrinking on mobile and it looked really rubbish. This code solved that problem. However, now I have a new one.

Only a giant white box appears as the preview image when I post the link to a social media site. That, or no preview at all. This was not the case before I added the code. When I post the link, I'd like a preview of the page to show as normal. 

Any ideas? 

URL: https://acerintegration.com/

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top:0px;
}
}
</style>