How can I remove all of this space above the post

fvelardo · November 2016

Hey Guys --

Single blog post page - how can I remove all of this dead space above the post OR just add a global slider to the single post page like other pages. Would prefer to just remove all the dead space and show the post after the top nav.

example: http://frankvelardo.wpengine.com/2016/09/09/support-the-leukemia-lymphoma-society/

Albert · November 2016

Hey,

http://pasteboard.co/mgFjk1kmy.png - this is how your site looks like and we wonder which one is "dead space" that you want to remove.

fvelardo · November 2016

So I already kinda rigged it by doing this:

body:not(.template-slider) #Header{min-height:75px} (this # was initially somewhere around 250px if I remember)

BUT it is still not correct when sized responsively ... see here: http://pasteboard.co/nouiUkn9y.png

I figure I will just adjust that size via responsive styling BUT is that a correct way to do this or is a proper way.

THANK YOU!!

Albert · November 2016

If your solution works then it's ok but we would like to see the link of site where this space is. The previous link you sent us, where this space wasn't there, just doesn't work now.

fvelardo · November 2016

Try this: http://frankvelardo.wpengine.com/41st-pizzarev-opens-in-thousand-oaks/

Must view with a mobile sized browser of

Here's what it looks like on my iPhone: http://pasteboard.co/nKiOgaGv9.png

What's weird is if I size it in Chrome or Safari it works fine, but if just open that link above on my iPhone I get what you see in the pasteboard.

?? help

Albert · November 2016

https://snag.gy/fUdwa0.jpg - this is a screenshot from iPhone as well and as you can see, it doesn't look like on your's. We did checked it on 3 different devices with same positive result.

fvelardo · November 2016

Yea I see that. Hmmm ... when I resize the browser to a mobile size footprint than I get the wonky top. But I guess thats not as big a deal. Most users won't do that.

Thanks so much! I actually have another issue I will start another discussion with.

HotSauceJeff · November 2016

Let's not give up on this yet. I am experiencing a similar problem on post pages and have seen some other similar references on the forums.

Like fvelardo, it exhibits itself when I resize my browser (Safari) and also exhibit's it on my mobile device using the default Samsung galaxy browser, chrome, and firefox. It may be a different problem, but looks similar to what is being discussed.

Screenshot 1: Browser basically at full screen:

http://recoverymisfits.com/debug/screen1.jpg

Screenshot 2: Browser reduced to where text menu is no longer visible:

http://recoverymisfits.com/debug/screen2.jpg

Screenshot 3: Basically mobile width, same display I see on mobile, extra space:

http://recoverymisfits.com/debug/screen3.jpg

I have spent some time trying to track this down. From my browser debug, it appears to be associated with the div.intro-inner. Screen shots 1,2 this height is 20px.

Screenshot 4: Mobile example of "extra space", div.intro-inner = 200px:

http://recoverymisfits.com/debug/screen4.jpg

I do not see this behavior on regular pages, only posts. I am using the Intro Header template and have responsive turned on. I have tried various css modifications, but I am admitted weak on css and still getting used to where all the switches, knobs, bells, and whistles are. It may be a simple textbox change that I am overlooking.

The main side can be viewed here:

http://recoverymisfits.com/content/

Hope this information helps solve both mine and fvelardo's problem.

Thanks for all your support, I have been able to solved most of my other issue via the forums.

Albert · November 2016

@HotSauceJeff In your case, it's INTRO PADDING. You set it under Theme options > Blog, Portfolio & Shop > Blog > Single Post section.

HotSauceJeff · November 2016

My settings for that are ---> "10px 0"

HotSauceJeff · November 2016

Very few modifications in the CSS:

#Intro .intro-title { display: none !important; }

.section-post-related .image_frame .image_wrapper .image_links a.zoom { display: none !important; }

.blog .image_frame .image_wrapper .image_links a.zoom { display: none !important; }

#Footer .footer_copy .social li a { color: #000 !important; }

#Footer .footer_copy .social li a:hover { color: #FFF !important; }

HotSauceJeff · November 2016

A screenshot from my side incase you see something I've set odd or wrong.

Thanks...

http://recoverymisfits.com/debug/screen5.jpg

fvelardo · November 2016

This is exactly the problem I am experiencing as well. Thank you for jumping on this HotSauceJeff! Good to know I am not the only with this issue.

HotSauceJeff · November 2016

Well.... here is an update of what I have found, finally dug into it a little more today.

This has just been one of those things that bothered me, but other areas of the site were more important.

I have added the following to my custom css:

#Intro { height: 75px !important; }

#Intro .intro-inner { padding: 0px 0% !important; }

The extra space on the narrow screen seems to be from the div.intro-inner padding....

This got me half of the way there.... still extra space, but much less.

What I am noticing now, is in the two larger screen displays (fullscreen desktop/tablet for lack of a proper name). The div.intro-inner is displayed BEHIND the menu bar. On mobile/small screen width, div.intro-inner is displayed BELOW the menu...

Going to dig around a little more.... Might be something silly in the responsive settings. Still kind of see some unexpected spacing on tablet/medium screen display, but I can live with a trade off there. I would like to understand why though....

I have seen some CSS examples on here that to set things based on screen width....

HotSauceJeff · November 2016

Something like this seems to work well for me, still need to implement something on pages as my "tablet" view isn't quite the way I want on pages.....

Added to BeTheme CSS:

@media only screen and (min-width: 1px) and (max-width: 768px) {

#Intro { height: 10px !important; }

#Intro .intro-inner { padding: 0px 0% !important; }

}

@media only screen and (min-width: 769px) and (max-width: 1239px) {

#Intro { height: 80px !important; }

#Intro .intro-inner { padding: 0px 0% !important; }

}

@media only screen and (min-width: 1240px) and (max-width: 1920px) {

#Intro { height: 75px !important; }

#Intro .intro-inner { padding: 0px 0% !important; }

}

Probably not good programing style, etc. As I said, not the best when it comes to CSS...

Any suggested values or other input from muffin is welcome

fvelardo · November 2016

HotSauceJeff ... what I've found is when you set the padding in the BeTheme Options then the problem rears it's ugly head. When I edit the css here: body:not(.template-slider) #Header{min-height:75px} in layout.css the problem is solved, at least for me.

HotSauceJeff · November 2016

@fvelardo

As long as we find something that works for us, it's all good....

I do like having control for what I see as three different screen layouts for other reasons, so I think that is why I kind of started down that route.

I think I tested the code you posted before and still had some problems, but had not dug into it very deeply and was very early into working with BeTheme. Relatively new with Wordpress too. I may take your CSS out for a spin again.

Best,

Jeff

How can I remove all of this space above the post

Comments

This website uses cookies