Help needed to get rid of unwanted gap on Wordpress page

dblistowel · 03-03-2014 05:49PM #1

Hi,

I am currently working on a Wordpress site - link below - and cannot get rid of a gap on the page below the main navigation menu. I would like the image below to run flush with the nav menu above it, I've tried adding custom css, searching the css file for the parent theme (I'm using a Pinboard child theme), in this css file I thought I'd found what was causing the gap and changed those css properties and then added them to my custom css but to no avail !

Does anyone know how to fix this ? Thanks

link to page:

http://dbtest.destinationballybunion.ie/?page_id=1016

custom css added to page:

[HTML]#container {
margin: 0%;
}

#container text area {
margin: 5%;
}

wrapper {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

entry {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
padding: 0px;
}

.entry-content a img,
#attachment-nav a img {
max-width: 98.5%;
padding: 0%;
box-shadow:0 0 3px #EEE;
background:#FFF;
border:#EEE 1px solid;
}

.single .entry, .page .entry, .error404 .entry {
margin-bottom: 5.1% !important;
padding: 0;
}

#site-title img {
margin: 0;
}
#site-title img {
position: relative;
left:-35px;
}

main pic a {
padding: 0px;
width: 100%
margin-top: 0px;
margin-bottom: 0px;
}

pic a {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

body .wpb_content_element, body ul.wpb_thumbnails-fluid > li, body .last_toggle_el_margin, body .wpb_button { margin-bottom: 0px; }[/HTML]

Talisman · 03-03-2014 06:29PM

There's an empty H1 tag on the page.

Line 414:
[HTML]<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
[/HTML]

I moved it out of the way in Firebug and everything snapped together.

[HTML]element.style {
position: absolute;
left: -9999px;
}[/HTML]

carlmango11 · 03-03-2014 09:39PM

You should use Chrome Developer Tools. If you're in Chrome you can right click any element (such as your gap) and click inspect element. It will show you the entire page as a tree of collapsible nodes alongside the CSS which is styling them. You also have various other tools which come in handy such as a Javascript console.

dblistowel · 03-03-2014 10:14PM

carlmango11 wrote: »

You should use Chrome Developer Tools. If you're in Chrome you can right click any element (such as your gap) and click inspect element. It will show you the entire page as a tree of collapsible nodes alongside the CSS which is styling them. You also have various other tools which come in handy such as a Javascript console.

Thanks for your time on this - up to now I have been using firebug but I've started looking at chrome, it's got some handy web design extensions. I presume the developer tools in chrome are just the same as you'd find with firebug ?

dblistowel · 03-03-2014 10:33PM

Talisman wrote: »

There's an empty H1 tag on the page.

Line 414:
[HTML]<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
[/HTML]I moved it out of the way in Firebug and everything snapped together.

[HTML]element.style {
position: absolute;
left: -9999px;
}[/HTML]

thanks for the help on this, i just tried taking out the h1 tags in firebug and yeah that works. the problem is doing this through wordpress - you need to access and change the php files to change the html - i don't know php.

in the second part do you mean to substitute the empty h1 element in place of 'element' ? will this enable me to fix the problem without having to alter my theme's html and php ? sorry, i'm still new enough to css.

carlmango11 · 03-03-2014 11:17PM

dblistowel wrote: »

Thanks for your time on this - up to now I have been using firebug but I've started looking at chrome, it's got some handy web design extensions. I presume the developer tools in chrome are just the same as you'd find with firebug ?

Never used firebug, I'd imagine they're pretty similar

daymobrew · 04-03-2014 07:32AM

dblistowel wrote: »

thanks for the help on this, i just tried taking out the h1 tags in firebug and yeah that works. the problem is doing this through wordpress - you need to access and change the php files to change the html - i don't know php.

As you have created a child theme, have you copied any of the parent theme php files into the child theme directory? I would not expect there to be an unclosed h1 tag in it.

Talisman · 04-03-2014 11:26AM

dblistowel wrote: »

in the second part do you mean to substitute the empty h1 element in place of 'element' ? will this enable me to fix the problem without having to alter my theme's html and php ? sorry, i'm still new enough to css.

The second part was just the css I used to move the header.entry-header element out of the way.

You should delete those tags from the template as they don't appear to be used - "Trek millennia in a mile" is the content of another H1 tag on the same page. One of the golden rules of SEO is that there should only be a single H1 tag on any page.

tricky D · 04-03-2014 12:01PM

Talisman wrote: »

One of the golden rules of SEO is that there should only be a single H1 tag on any page.

Actually that's a bit of a myth. If it makes logical and semantic sense to have multiple h1s, then go ahead as long as there's no trying to con the search engines. An acceptable example would be a page with a list a of news articles in the heading and 1st paragraph format, where the heading and paragraph are extracted directly from the actual article page with h1 headings.

https://www.youtube.com/watch?v=GIn5qJKU8VM

dblistowel · 04-03-2014 09:56PM

No daymobrew, I created the child theme using a Wordpress plugin - I think it was 'one click child theme'.

dblistowel · 04-03-2014 10:20PM

Talisman wrote: »

The second part was just the css I used to move the header.entry-header element out of the way.

You should delete those tags from the template as they don't appear to be used - "Trek millennia in a mile" is the content of another H1 tag on the same page. One of the golden rules of SEO is that there should only be a single H1 tag on any page.

The next stage, after the website is finished, will be covering SEO. With regard the gap problem I copied and pasted your css code into the custom css for that particular page and nothing happened - I've also tried:

[HTML]
entry-title {
position: absolute;
left: -9999px;
}
[/HTML]

and...

[HTML]
entry-header {
position: absolute;
left: -9999px;
}

[/HTML]

to try and move out of the way the class that's causing the gap, or am I completely off here. Can this be fixed by just accessing the page specific custom css or do i have to access the html which seems to be wrapped in with php - which i know very little about, php that is. thanks

Banta · 05-03-2014 06:13PM

In the "styles.css" file on line number 1425 you'll see the following classes:

[HTML].single.page-template-template-full-width-php .hentry.onecol .entry-header, .page.page-template-template-full-width-php .hentry.onecol .entry-header, .error404.page-template-template-full-width-php .hentry.onecol .entry-header {
float: none;
width: auto;
}[/HTML]

Remove "float: none;"

This fixes the issue across all the pages.

Help needed to get rid of unwanted gap on Wordpress page

Comments