CODEWITHSUNDEEP
jqueryjavascriptcsswordpress
Disk01
Disk01

Reputation: 357

How to remove excess white spaces between the navigation and the main content?

Everyone, Well, I am here to ask you guys for technical assistance in fixing an issue with one of Wordpress template named, "Story". Though there is no such big problem with this theme in most of web browser except the UC Mini and Opera Mini and I know just because these browser does not renders most of CSS and JavaScript code. When I am opening my Wordpress powered website using Story template it is giving a lot of white-spaces between the Navigation and the main content. I tried to resolve the issue using the Inspector feature of the Firefox and found that there is a line which keeps on changing its parameters, which is <div id="content" class="site-content">.

It sometime changes to

<div id="content" class="site-content" style="margin-top: 121px;"> and

<div id="content" class="site-content" style="margin-top: 441px;"> etc.

The value of margin-top automatically changes itself.

Please help me!

Upvotes: 0

Views: 72

Answers (2)

Disk01
Disk01

Reputation: 357

Since there was no problem with desktop version, I just customized the code for mobile version.

<div id="content" class="site-content" <?php if ( wp_is_mobile() ) 
{ echo 'style="margin-top:70px;"';} 
else { echo 'style="margin-top:120px;"';} ?>>

to the header.php

And bookmarked 

//$('#content').css('margin-top', $('#masthead').height() + 50);

in the functions.php

Also I would like to thanks Moshin

Upvotes: 0

Muhammad Asad
Muhammad Asad

Reputation: 3793

In this theme, "Story" theme, author is taking Top Nav's height and then adding 50px into it, resulting total is being placed as Top margin to content div as inline CSS using the JS.

You can change this, please visit functions.php file, on line 157 you see the following line:

            $('#content').css('margin-top', $('#masthead').height() + 50);

That is it! You can control the top margin using the fixed integer there i.e. 50 , by reducing it to 20 or 10 will work great for narrow top margin. Or you can simple comment this line using the comment tag e.g as following:

            //$('#content').css('margin-top', $('#masthead').height() + 50);

And then apply your top margin the simple way you want to do in header.php html tag.

I am sure this will solve your issue. Let me know if it does not!

Upvotes: 1

Related Questions