Support Center Visit Demo License manager Buy @ envato

How can I remove all of this space above the post

fvelardofvelardo
in Blog
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.

Comments

  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • fvelardofvelardo
    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!!

  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • fvelardofvelardo

    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 :)


  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • fvelardofvelardo
    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.

  • HotSauceJeffHotSauceJeff
    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:
     
    Screenshot 2: Browser reduced to where text menu is no longer visible:

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


    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:

    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:

    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.






  • AlbertAlbert
    @HotSauceJeff In your case, it's INTRO PADDING. You set it under Theme options > Blog, Portfolio & Shop > Blog > Single Post section.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • HotSauceJeffHotSauceJeff
    My settings for that are ---> "10px 0"

  • HotSauceJeffHotSauceJeff
    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; }


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

  • fvelardofvelardo
    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.
  • HotSauceJeffHotSauceJeff
    edited 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....


  • HotSauceJeffHotSauceJeff
    edited 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 :)
  • fvelardofvelardo
    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. 
  • HotSauceJeffHotSauceJeff
    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



Sign In or Register to comment.