Webpage not responsive

My web page looks ok on desktop and, thanks to some CSS that Leo sent, it looks good on mobile.

/* Leo at GP sent this CSS to fix mobile spacing at bottom of header
image. */
@media (max-width: 768px) {
.inside-header {
padding: 125px 20px 30px 40px;
}

But the tablet display is a mess. The background header image does not display fully. The banner under that image has disappeared. All of the other images are too small. And the spacing, in general, not right.

I tried this CSS:

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

I think it helped the spacing in general but not the other issues so I took it out, but maybe it's a part of the solution.

Any help you can provide would be appreciated.
John