Page Hero Header Error On Mobile

I'm so sorry to bother you guys again. I don't know what I've done and scared to meddle and mess it up even more...

The hero header is not showing right on mobile but fine on desktop:

Could it be related to @media min width custom css?

Here is all the code I have so far:

h1.entry-title {
    text-align: center;
}

.wp-caption .wp-caption-text {
font-size: 16px;
font-style: italic;
text-align: center;
}

.wp-block-image figcaption {
    font-size: 0.75em;
    opacity: 0.75;
    text-align: center;
}

.review-total-wrapper {
    margin-top: -80x !important;
}

ul.review-links {
    text-align: center;
}

@media (min-width: 1064px) {
    .wp-block-image .alignleft,
    .wp-block-image .alignright {
        float: none;
        margin: 0 auto 1em auto;
    }
}

a {
    font-weight: normal;
    text-decoration: none;
}

.comment {
    font-size: 18px;
}

.footer-widgets .footer-widget-1 {
    flex-basis: 30%;
}

.footer-widgets .footer-widget-2 {
    flex-basis: 20%;
}

.footer-widgets .footer-widget-3 {
    flex-basis: 25%;
}

.footer-widgets .footer-widget-4 {
    flex-basis: 25%;
}

@media(min-width: 1180px) {
    .post .inside-article {
        margin-left: 26.66%;
    }
}

@media (min-width:1180px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #da394a;
        border: 1px solid #da394a;
        color: #fff;
        line-height: 30px; /*this number will likely need to be adjusted*/
    }

    .main-navigation .main-nav ul li.nav-button:hover a {
        background-color: #fff;
        color: #da394a;
    }
}

@media (max-width: 1180px) {
    .single-post .page-hero + #page {
        margin-top: -225px;
    }
}

.page-hero-gravatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.page-hero .author, .page-hero-gravatar {
    display: inline-block;
}

@media (min-width: 769px) {
    .single-post .page-hero + #page {
        margin-top: -120px; /* adjust margin to suit */
    }
}

.page-hero .comment-count {
    border-left: 2px solid #fff;
    padding-left: 10px;
    margin-left: 10px;
}

@media (min-width: 1180px) {
  .comments-area {
    margin-left: 33%;
  }
}