Blog looks terrible on mobile

Site URL: https://www.jeremymillerfsa.com/blog/blog-post-shark-tank

Help! My blog post pages look completely broken on mobile. See attached screencap. 

This code caused problem

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 40vh !important;
}
  }
</style>

Where did you add it? Blog Page Header or Code Injection Header?

Aha! I actually stole this code from another post where you helped someone resize a header background video on mobile (this post): 

I've removed it (from header injection), but now I'm wondering if there's another way to resize the video header on mobile that's at https://www.jeremymillerfsa.com/about. If not, maybe there's a way to force mobile to show the fallback image?

Thanks!

15 hours ago, camfont said:

Aha! I actually stole this code from another post where you helped someone resize a header background video on mobile (this post): 

I've removed it (from header injection), but now I'm wondering if there's another way to resize the video header on mobile that's at https://www.jeremymillerfsa.com/about. If not, maybe there's a way to force mobile to show the fallback image?

Thanks!

 

 

Edit About Page > Add a Code Block at bottom of page > Paste this code

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 40vh !important;
}
  }
</style>

That seems to have done it – thank you!