page view on desktop different on mobile device

Hi support,

I'm using CSS to insert a image (a colors bar) on top of each page (rather than using the page header within each page). See url (not the front page)

https://www.clubtinytots.com.au/

.page-id-25 .inside-article {
background-image : url('https://www.clubtinytots.com.au/wp-content/uploads/2015/07/3.png');
background-size : contain;
background-repeat: no-repeat; */
}

This is because I want to use 'element spacing' in each page (inside-article) to make the page sit within a background (with a gap between it and the menu bar).

To avoid the page heading sits inside the image, it needs to be moved further down the page, and I achieve this by giving the 'content' a padding-top of 190 px.

This allows me to achieve the look I wanted, however, when I view the website on a smart phone, the page heading appears to be much further down the page, leaving a blank gap between itself and the inserted image.

Could you please advise how I could 'get rid of' this blank gap in the page when viewed on a smart phone ?

Thanks
Nam