Jump to content


Photo
- - - - -

Remove space held for title when set to display: none


  • Please log in to reply
12 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 07:59 PM

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

Please Login or Register to see this Hidden Content

. 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?



#2 batman

batman

    Bat Learning

  • Members

  • 2056 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 09:30 PM

Hi sheilahoff

If I understand, please you can try with

Please Login or Register to see this Hidden Content


  • James B likes this

#3 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 June 2013 - 09:45 PM

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.



#4 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 10:31 PM

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.

Attached Files



#5 batman

batman

    Bat Learning

  • Members

  • 2056 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 10:51 PM

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

Please Login or Register to see this Hidden Content



#6 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 11:11 PM

I appreciate the help however it's not working. You can see on this capture

Please Login or Register to see this Hidden Content

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?



#7 batman

batman

    Bat Learning

  • Members

  • 2056 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 11:18 PM

Hi sheila

I await your response, so I'm still learning

:) 



#8 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 11:22 PM

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.

Attached Files



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 June 2013 - 11:46 AM

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.

  • batman likes this

#10 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 21 June 2013 - 06:14 PM

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.



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 June 2013 - 10:34 PM

Hi Sheila

 

For the area under the slider it seems there's a margin underneath assigned to the postloop which is causing the gap.

Please Login or Register to see this Hidden Content

 

The space at the bottom is coming from some different area's. One being the article margin, assigned to the hentry class

Please Login or Register to see this Hidden Content

 

Padding on the hentry class -

Please Login or Register to see this Hidden Content

 

Padding at the top of the grid -

Please Login or Register to see this Hidden Content

 

Padding at the top of the morefoot content-pad -

Please Login or Register to see this Hidden Content

 

Removing the above should give you a result like this -

Please Login or Register to see this Hidden Content


  • batman and sheilahoff like this

#12 sheilahoff

sheilahoff

    Advocate

  • Members

  • 384 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 21 June 2013 - 11:32 PM

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!



#13 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 June 2013 - 11:48 PM

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