Changing header size when CSS is already applied

I have been trying to change my Header so that it doesn’t look squished when I go to phone mode. This is it in desktop…

And here it is in phone

I am using the sense theme and already have a lot of CSS applied to the header in base.css which is shown below. Any help is appreciated!

Thanks for your reply, I can’t seem to find where ‘responsive’ is located in theme settings. I would love for there to be a margin of around 65 pixels between the header and the image banner below. I have tried to add that but the background starts peaking through. I have pasted an image below to show you what I mean…

So ideally, the pink part wouldn’t be there and would be transparent and in turn this would be what I would want it to look like

Yes please