Problem with content padding

Hi,

I have a problem with the padding of my content.

My site is set to:

No header (only menu)

I have inserted a custom CSS so the logo is 300 px tall:

.site-logo {
max-height: 300px;
}

I used this CSS to set the padding for my content:

#primary.fp-content-area {
padding-top: 50px;

}

When I test the site, the content sometimes does not have a padding and it starts under the masthead / logo area.

The site is here:

This is mainly visible when I load a page for the first time, if I reload or re-click on the menu link the padding is correct (sometimes).

This is the whole Custom CSS I use:

html,body{
	overflow-x: hidden;
}

.btn-menu {
		float: center;
		font-size: 28px;
		font-family: "FontAwesome";
		color: #fff;
		text-align:center;
		width: 28px;
		height: 28px;
		cursor: pointer;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;
	}

#masthead {
   background-color: black;
}

.site-logo {
max-height: 300px;
}

.wptg-thead {
  
  background-color: #000000;
  data-title-color: #ffffff;
  
  }

#primary.fp-content-area {
padding-top: 50px;
}

Could you please help resolve this problem?

Thank you!

Tom

Hello Tom,

I tried your code, it works fine on my test site. Maybe your site is cached by certain plugin like W3 Total Cache? If so, please flush the cache after you applied new code addition.

To make it visually noticeable (for debugging purpose), try this code:


#primary.fp-content-area { 
   padding-top: 50px;
   border: 10px solid green; 
}

Regards,
Kharis

Hi,

Thank you for your reply.

Unfortunately this doesn’t work, I tried it in a second browser (with no cached pages) and I get the same issue.

Please see screenshots: http://tomaszwalenta.com/dl/ERROR/

Is there another way to make this work?

Best,

Tom

Hello Tom,

I am sorry, I just noticed that it happens in tablet screen, I think you should set the header to become static. So it won’t overlay the content area. Please, use this code:


@media only screen and (min-width:992px) and (max-width:1024px) {
  
  .site-header,
  .site-header.fixed {
    position: static !important;
  }
  
}

Let me know how it works for you.

Regards,
Kharis

Hi,

Thank you, this maybe fixes the problem on tablets, but it doesn’t fix the problem on desktop, the issue still exists.

I tried to set (max-width:2560px) - my screen resolution - this gives me a white space over the header, so not good.

I think the problem comes from the logo being 300px. This is a modification I made and I think this is the cause.

.site-logo {
max-height: 300px;
} 

What do you think, can it be related to the logo size?

Best,

Tomasz

It’s not the logo size. I removed the 300px max-height and the problem still exists.

Please help!

Tomasz

I made a screen recording, you can clearly see what is happening:

http://tomaszwalenta.com/dl/ERROR2/

Tomasz

Hello there,

Your screen recording doesn’t work. Could you please upload it to http://cloudup.com/ and share its public link here?

Regards,
Kharis

Here it is:

Waiting for reply

I’ve been waiting for more than 20 hours for a reply. Can someone please help me, I’m a paying customer!

I would like to apologize in advance for the long delay. Please try to do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  $(window).on('load resize', function() {
    var headerHeight = $('.site-header').outerHeight();
    $('.header-clone').css('height',headerHeight);
  });

})(jQuery);


  1. Update

You might need to clear your web browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

Thank you! It works! You are a genius!

All the best,

Tomasz

You’re welcome, Tomasz. Glad to hear the code works well.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis