Jump to content
sheilahoff

Remove space held for title when set to display: none

Recommended Posts

sheilahoff

I've set the homepage title to display: none which works great. But it leaves a space held for it which you can see between the slider and content on my dev site at http://www.solsara.hoffmangraphics.com. I've tried making margin and padding zero to no avail. Does it need to be a negative number or is there some other way to remove this gap?


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
batman

Hi sheilahoff

If I understand, please you can try with

.section-morefoot .widget-title {margin-top: 0em;}
  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B

Hi Sheila

 

I'm not sure exactly which part you're referring to. I see the navbar under the branding image in the header. If you could take a screenshot to confirm exactly which part we're looking at for us.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sheilahoff

I don't think the morefoot code address my issue, although I do want to reduce the space between the content and the morefoot as well. I tried the offered widget-title code but it did not help either issue.

 

I've attached a capture to show exactly what I was initially asking about.  The purple line in Firebug shows a section class of  either bd post-title-section fix or post-meta fix post-nothumb  media or something that is adding empty space between the slider and the content.

 

What is that "fix" code about? That's what gets me lost in Firebug.

 

So I need to reduce the space between the slider and content AND between the content and morefoot.

 

Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
batman

Hi again

 

Please try with:

 

.content .content-pad {padding-top: 0px !important;}

or / and

.pagelines-grid {padding-top: 0px !important;}

 

I added a picture of my Firebug

http://content.screencast.com/users/BatmanMac/folders/Default/media/4ffe2d75-2a12-4f9a-8491-f91eb721377c/Captura%20de%20pantalla%202013-06-20%20a%20las%207.54.59%20PM.jpeg


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sheilahoff

I appreciate the help however it's not working. You can see on this capture http://awesomescreenshot.com/0a01faijbd that both the spaces are still there with both codes applied. I also tried each of them separately to no avail. Maybe I have something conflicting with it. I'm going to experiment with putting it at the bottom of my CSS instead of the top. And then maybe try padding-bottom instead of top because I DID see the space ABOVE the slider get smaller but that was NOT the desired affect!

 

Reporting back after experimenting: no difference in putting code at the bottom or in changing to padding-bottom instead of top. Any other ideas?


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
batman

Hi sheila

I await your response, so I'm still learning

:) 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sheilahoff

I have a feeling this is a BAD solution but in playing in it in Firebug I get the attached spacing that LOOKS like I'd like. But I suspect using a negative margin is not good practice and I haven't check if it makes something somewhere else look awful...

 

So maybe I was on the right track with the bottom instead of top. I'll try the margin instead of padding your suggested code. Thanks for trying to help. I'm still learning too!

 

NOPE: No joy there either. I think I better go do some reading.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Rob

Hi Sheila,

 

CSS is often 'multi-layered'.   One element you may hide or move, may not resolve an issue because there are other, particularly related elements, which you may miss in your CSS investigation and fail to modify.

 

This appears to be one of those cases.

 

While you successfully hid the title, you missed this:

.post-meta .post-title-section {
    padding-bottom: 6px;
}
 
What that does is leaves a 6px padding in the post-title section.  While the title itself is hidden by use of display: none;  the section isn't hidden, nor is this padding modified.  Just change the 6px to 0 and you'll see the entire section move up, pulling the excerpt below with it, resolving the issue.
  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sheilahoff

Thanks. I'm aware of the multi-layered nature of CSS but sometimes I'm baffled to make sense of it all. The code you provided did not fix the issue either. I tried several variations. When I have a few moments again, I think I'm going to make a mini-video and walk through what I'm doing. Maybe either you or some local resources will help me see what it is I don't see about this identification process.Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B

Hi Sheila

 

For the area under the slider it seems there's a margin underneath assigned to the postloop which is causing the gap. http://screencast.com/t/CWAflMgLaUcB

 

The space at the bottom is coming from some different area's. One being the article margin, assigned to the hentry class http://screencast.com/t/Znol7Y1Q6tz

 

Padding on the hentry class - http://screencast.com/t/s6ro6tcmH2sN

 

Padding at the top of the grid - http://screencast.com/t/e276MmMo

 

Padding at the top of the morefoot content-pad - http://screencast.com/t/MNYZ0cKMM1ST

 

Removing the above should give you a result like this - http://screencast.com/t/KsU1GnJy

  • Like 2

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sheilahoff

WOW...this is GREAT! Thanks so much. I haven't followed all those links yet but I'm sure they'll be very helpful. I just spent the last 2 hours doing a screen share and WP training with this client. He's pretty happy which is great. I'll report back once I've had a chance to work with all this new info!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B

You're welcome Sheila, have a great weekend :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×