Extra space on Blog entry title

It looks like you added margin-bottom: 100px to the .entry on line 1890 –

/* ## Entries
--------------------------------------------- */

.entry {
	margin-bottom: 100px;
	padding: 0;
}

Next I noticed this code added right after the title –

<div class="entry-content" itemprop="text"><p><!-- Google Tag Manager (noscript) --><br>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7VX9MH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><br>
<!-- End Google Tag Manager (noscript) --></p>
<span id="tve_leads_end_content" style="display: block; visibility: hidden; border: 1px solid transparent;"></span></div>

I’m not sure where that’s coming from exactly. It may be a plugin or custom code that was added somewhere, but that’s where the majority of that space is coming from.

Other than that, the rest of the space seems to be coming from the padding of the .entry-title around line 966 –

.entry-title {
	font-size: 46px;
	font-size: 4.6rem;
	padding-top: 30px;
	padding-bottom: 40px;
	text-align: center;
	color: #fa5738;
}

I checked your Contact page and it looks like you’ve added the .one-half code in correctly. It’s supposed to convert from 2 Divs/Columns floating next to each other to 1 Column or Div per line for smaller browsers and mobile devices. Most users that are on a regular size tablet are viewing from a 1024px width browser in landscape mode. The code comes from line 2737 inside this section @media only screen and (max-width: 1024px) { –

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0 0 40px;
		width: 100%;
	}

If you would rather it convert to 1 column (100% width) on a smaller size, then you can take the code above and move it down into a smaller section in the Responsive area of the CSS. Then that means you’ll see 2 columns on 1024px width browsers and tablets. You can try moving it under this line to see how it looks –

@media only screen and (max-width: 960px) {

Ah, sorry I must have gotten it mixed up. I meant to say the Google code was added and causing extra space.

For the Social Buttons, the reason they’re disappearing when you Resize the Browser or view on mobile devices is because the Media Queries section is missing a few Closing Brackets } on some of the sections.

For example, take a look at this code –

@media only screen and (min-width : 1280px) {       
        .bw-featured-title  {
        	max-height:600px;
        	height: 600px;
        }

There is an opening on the first line but no closing bracket at the end of the code. It should look like this –

@media only screen and (min-width : 1280px) {       
        .bw-featured-title  {
        	max-height:600px;
        	height: 600px;
        }
}

Once you go and add the closing brackets on the parts where they’re missing, then it should start working.

These are the lines that need fixing –

@media only screen and (min-width : 1280px) {       
        .bw-featured-title  {
        	max-height:600px;
        	height: 600px;
        }

@media only screen and (min-width : 1024px) {       
        .bw-featured-title  {
        	max-height:500px;
        	height: 500px;
        }
	  

@media only screen and (min-width : 768px) {       
        .bw-featured-title  {
        	max-height:360px;
        	height: 360px;
        }

And this –

/* Contact Form 7 and Contact Page Styling
/******************************************************************/
@media only screen and (min-width :1024px) {  	
.wpcf7-form.cf7-style {
    margin: 0 auto;
    width: 500px; /*Add desired value here*/
    float: none;
    display: block;
}

I didn’t look at the whole file, so there could be more that may need fixing, but some of the code above is what is affecting the Social buttons to disappear.

You’re Welcome!