Removing Extra Padding in Brine Mobile

Hello,

I'm working on adding images/banners to my homepage at http://vedranmisic.com (password: sunday).

On the desktop version, the padding looks great, but on the mobile there is a lot of empty space between each banner. And I don't see styling option to reduce this on mobile.

Could you please provide me with CSS code to reduce this padding?

Thanks so much,

Vedran.

Try adding the following to your custom css, after any code that may already be there. 

@media only screen and (max-width: 640px) {
	#block-yui_3_17_2_1_1572055006330_3766, #block-yui_3_17_2_1_1572055006330_10549 {
		// This removes top and bottom padding from both image blocks
		padding-bottom: 0;
		padding-top: 0;
	}
	#block-yui_3_17_2_1_1572055006330_10549 {
		// This adds a bit of top padding to the bottom image block - tweak as you like
		padding-top: 5px;
	}	
}

Hi @colin.irwin

Thanks so much. I added the code you provided, and the padding between two bottom banner was reduced, but not between the top and second banner. 

Also, the bottom banner has shifted left and up now, showing a gray backround. I'll attach a screenshot to show you these two issues. 
Let me know please if you have a solution.

Thanks so much!