How to fix elements that look weird on mobile phone?

Your style.css file has these two media queries:

/* Tablet (portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   ...
   body {background-image:url('https://iffphila.com/wordpress/wp-content/uploads/2014/01/background-medium.jpg');}
   }
   ...
}

/* Mobile (portrait) */
@media only screen and (max-width: 767px) {
   ...
   body {background-image:url('https://iffphila.com/wordpress/wp-content/uploads/2014/01/background-small.jpg');}
   ...
}

The first media query is for any width between a tablet and 959px (kind of a weird range), and displays the medium sized image with the old dates, while the second media query is for anything below tablet width, and displays the smaller header image with the old date. So you can either update those images or change the value of the image URLs to point to new images. You can also take out those properties, but your header is going to look squashed.

The main blue image on the homepage and the white band underneath it do not resize when you narrow the page/view on mobile. How do I fix it so they do?

There are all sorts of rules that set the width to 960px. Add this media query to the end of your child theme’s style.css file:

@media only screen and (max-width: 960px) {
   .home #content .entry-content,
   .home #main,
   .home #post-803,
   .home #sidebar-subsidiary,
   .home #footer {
      width: 100%;
   }
   .wrap {
      max-width: 90%;
   }
   .home #sidebar-subsidiary {
      height: auto;
   }
}

The three widgets at the bottom get smooshed on top of each other when you narrow the page/view on mobile. They cover up the copyright info and I see a very tiny smiley face at the bottom to the left…. How do I fix all this?

That was taken care of in the fix above.

The twitter feed doesn’t seem to be showing up on a computer but it is on mobile. How do I get it to show up on a computer?

I see a Tweet on my computer, in the bottom left.