Header and logo switching between header image and logo on mobile

I was wondering if instead of having the full header show in the mobile or smallest size layout, I could display just a logo? Is there a way of changing that?

I also was wondering if I can display less posts per page? Currently, I am showing 10 per page.

Number of blog posts are controlled via Settings – Reading – “Blog pages show at most”.

I would try to play around @media properties like:
@media only screen and (max-width: 1078px)

You can adjust each div class style based on screen size. There are already several such adjustments made for this theme already.
Closest example you can follow is for mobile menu. It is hidden when screen size is bigger than 767px. When screen size drops below that, regular menu is being hidden and is replaced with mobile menu.

More about media queries you will find here:

Btw, it is upsetting that you have romed link back to our site.