Blog posts look great on desktop, but are completely re-arranged on mobile. No clue how to fix it

Most of my mobile pages have been jumbled until I added a site header; however, I am not able to add a site header to my individual blog posts, so they are completely jumbled on the mobile version.

What is your site url? + Can you send all code in CSS box?

21 hours ago, tuanphan said:

What is your site url? + Can you send all code in CSS box?

sure thing! it's alaskaheavenly.com

/* Nav menu active link color */
body:not(.tweak-transparent-header) .header-nav-wrapper .header-nav-item--active a {
  color: #337ab7;
}

/* Basic table styling */
table.minimalistGrey {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.minimalistGrey td, table.minimalistGrey th {
  padding: 5px 4px;
}
table.minimalistGrey tr:nth-child(odd) {
  background: #d6cfbd;
}

/* Shrink mobile nav menu font */
@media screen and (max-width:767px){
  .header-menu-nav-item a {
      font-size: 1.3rem;
  }
  /*and shrink gmap*/
  .sqs-block-content > iframe {
    width: 330px;
  }
}

/* Attempt always-full-width banner */
  @media screen and (max-width:767px) {
    #page section:first-child {
        min-height: 32vh !important;
          height: 32vh !important;
    }
  }
/* End always-full-width homepage banner attempt*/

On 4/12/2023 at 1:31 PM, CooperLandingFishingGuide said:

/* Nav menu active link color */
body:not(.tweak-transparent-header) .header-nav-wrapper .header-nav-item--active a {
  color: #337ab7;
}

/* Basic table styling */
table.minimalistGrey {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.minimalistGrey td, table.minimalistGrey th {
  padding: 5px 4px;
}
table.minimalistGrey tr:nth-child(odd) {
  background: #d6cfbd;
}

/* Shrink mobile nav menu font */
@media screen and (max-width:767px){
  .header-menu-nav-item a {
      font-size: 1.3rem;
  }
  /*and shrink gmap*/
  .sqs-block-content > iframe {
    width: 330px;
  }
}

/* Attempt always-full-width banner */
  @media screen and (max-width:767px) {
    #page section:first-child {
        min-height: 32vh !important;
          height: 32vh !important;
    }
  }
/* End always-full-width homepage banner attempt*/

Change last code

/* Attempt always-full-width banner */
  @media screen and (max-width:767px) {
    #page section:first-child {
        min-height: 32vh !important;
          height: 32vh !important;
    }
  }

to this

/* Attempt always-full-width banner */
  @media screen and (max-width:767px) {
    #page article section:first-child {
        min-height: 32vh !important;
          height: 32vh !important;
    }
  }

15 hours ago, tuanphan said:

/* Attempt always-full-width banner */
  @media screen and (max-width:767px) {
    #page article section:first-child {
        min-height: 32vh !important;
          height: 32vh !important;
    }
  }

Thank you so much for the help, but it appears to be doing the same thing unfortunately 😕

On 4/17/2023 at 6:58 PM, tuanphan said:

Try change to this new code

@media screen and (max-width: 767px) {
   body:not([class*="type-blog"]) #page article section:first-child {
        min-height:32vh !important;
        height: 32vh !important
    }
}

 

Amazing! It worked! I can't thank you enough for your help!