Responsive header size

[tfader]

Hi there,

In responsive mode, the h1 tag is too big for the screen. I did try adding a snippet to reduce the h1 size for mobile screens to the Theme Options > Custom CSS, but it didn’t seem to work. Below is the code currently in the CSS Code box. A screenshot example of the home page is attached. The testing URL is: http://www.youbgm.com.php56-9.dfw3-2.websitetestlink.com/

Can you advise?

Also, I was hoping to adjust the spacing in mobile – on tablets is kinda squished (see ‘Join’ panel especiallY) and in 375 screen size, if you scroll down to the blue bg panel, you can see that the text and following headers are squished where there should be some padding. How can I adjust this in the mobile mode? For example

***********************************
CSS in Custom CSS:

@font-face {font-family: ‘DiamanteEF-DemiBold’;src: url(‘../webfonts/31FF52_0_0.eot’);src: url(‘../webfonts/31FF52_0_0.eot?#iefix’) format(’embedded-opentype’),url(‘../webfonts/31FF52_0_0.woff2’) format(‘woff2’),url(‘../webfonts/31FF52_0_0.woff’) format(‘woff’),url(‘../webfonts/31FF52_0_0.ttf’) format(‘truetype’);}

h1 {
font-family: ‘DiamanteEF-DemiBold’;
font-weight: bold;
margin-bottom: 0;
}

h2 {font-family: ‘DiamanteEF-DemiBold’;
}

h3 {font-size: 28px !important;
line-height: 1.2;
font-weight: 400;
}

h4 {font-family: ‘Ranga’, cursive;
font-size: 32px !important; }

.red {
color:#eb7f3de;
}

.blue {
color:#199ecb;

}

a.button.color-1{
font-family: ‘Courgette’, cursive;
font-size: 18px !important;;
background: transparent;
color:#ffffff;
border: none;
padding: 0;

}

a.button.color-2{
font-family: ‘DiamanteEF-DemiBold’;
background: #EB1F3E;
color:#ffffff;
border: none;
padding: 0;
letter-spacing: 0;
}

a.button.large {
font-size: 32px;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
padding: 20px 25px 20px 25px;
}

a.button.small {
font-size: 18px;
line-height: 1;
padding: 15px 25px 15px 25px;
}

Ticket