Navigation
Archive / make a page fullscreen (like it would be a background image)
This is archived content. Visit our new forum.
1 2 3
  • Author
    Posts
  • March 25, 2015 at 11:01 am #234983

    PlanBAgenturStuttgart
    Participant

    Hi everyone.

    I’m using the Integrity Stack at the moment for our site.
    I was wondering if it is possible to set a page total fullscreen (like it is in ethos 2/3)

    we have some virtual panorama-tours which I would like to integrate in our site (easiest via iframe) but I’m not sure how to have them in full screen mode. It basically needs to look like when you set a background image.
    The same principle goes for our gallery/portfolio which I would like to have as a slideshow in the biggest possible way (it seems a revolution slider would be the best option, but I don’t know how to pull the image-media description into the slider caption for each image.

    Is there a relatively easy way to do either of this?

    best regards,
    Christian

    Link to temporary website http://www.planbagentur.de/wordpress/
    note: the main domain does forward to the ‘old’ website

    March 25, 2015 at 4:13 pm #235185

    Nabeel A
    Moderator

    Hi Christian,

    Thanks for writing in! To make a page full width, You’ll need to use Blank – No Container | Header, Footer page template for full width content bands. You’ll find it under Page Attributes > Template in your page editor.

    You can use Revolution Slider to display your gallery images. For the description of each image you can add text layers in each slide. Please refer to this link https://theme.co/x/member/kb/sliders/ for further assistance.

    Hope this helps!

    March 26, 2015 at 7:44 am #235678

    PlanBAgenturStuttgart
    Participant

    the full width is working but I would also need to set it to full height. Otherwise my iframe (or embed – either way) will only be 157px in heigt.

    I tried setting the css height:100%; in every possible styles set up I could find but it never is full screen.

    the iFrame is added in the following way:
    <iframe src="http://panorama.planbagentur.de/panos/OFB_Verso_Dachterrasse_fin.html" width="100%" height="100%" seamless></iframe>
    http://planbagentur.de/wordpress/panorama/ (page in question)
    http://panorama.planbagentur.de/dt.html (the iFrame in question)

    March 26, 2015 at 9:59 am #235768

    Darshana
    Moderator

    Hi there,

    Please try adding the following CSS workaround into your Customizer, Custom > CSS section using the menu Appearance -> Customize. 

    
.page-id-206 iframe {
    min-height: 700px;
}

    Hope that helps.

    March 26, 2015 at 10:08 am #235783

    PlanBAgenturStuttgart
    Participant

    Thanks for the reply, will tryit.
    will that work on all sites, or will i have to add the paage-id-xxx for every panorama I want to add?

    March 26, 2015 at 10:13 am #235789

    PlanBAgenturStuttgart
    Participant

    okay. tried it: it will make the iframe a height of 700px. But I would want it to be full screen, depending on the screen size (as the document withing the iframe will be if you open it on its own).

    March 26, 2015 at 2:22 pm #235927

    Nico
    Moderator

    Hi There,

    Try increasing the number of your min-height to achieve full page.

    .page-id-206 iframe {
    min-height: 700px;
}

    for you not to add page-id-xxx, add class to your iframe for example:

    <iframe class="panorama_iframe" src="http://panorama.planbagentur.de/panos/OFB_Verso_Dachterrasse_fin.html" width="100%" height="100%" seamless></iframe>

    then use

    .panorama_iframe {
    min-height: 700px;
}

    If you want to get full screen together with the nav,

    Try adjusting your .masthead class.

    For example:

    .page-id-206 .masthead {
margin-bottom:-112px
}

    Hope it helps.

    Cheers!

    March 27, 2015 at 4:59 am #236333

    PlanBAgenturStuttgart
    Participant

    So I googled this a little further:

    to have a height of 100% you’d need to give every parent element 100% in height as well (including <html> and <body>). Otherwise the div (or iframe in this case) will be 100% of whatever the size of the parent div might be (even if it’s only 10px).
    This said, if you add “height:100%;” to every parent element of the one div you want to have at fullscreen, the page will actually be bigger than the screen and I have double scrollbars. One of them already appering if you only add the height:100%; to the <html> itself.

    So it seems the only proper solution for having your page full screen (on all devices) is to move the margin-bottom of the masthead upward as you said, and then finding the actual size of the window (via javascript or alike) and setting that as a fixed pixel height in the height attribute of the iframe. Unless there is a CSS method I don’t know of which will set every parent to height:100% and the overflow to hidden…
    I’m not sure however if this is possible within the theme or whether it might brake it. I’ll try and play around a little and if I find a solution, I’ll make sure to post it here.

    March 27, 2015 at 7:41 am #236417

    Zeshan
    Member

    Yes, that could be possible with deep CSS and JS customization, but regretfully we cannot provide support for it as it’s a custom development.

    However, I hope you find a workaround! 🙂 Have a nice day.

    March 27, 2015 at 8:39 am #236451

    PlanBAgenturStuttgart
    Participant

    That is fine enough. got it (nearly) working with the rather simple bit of code down below:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
function myFunction() {
    $("#panorama_iFrame").css("height", $(window).height());
    }
$(document).ready(myFunction);
</script>
<iframe id="panorama_iFrame" src="http://panorama.planbagentur.de/dt.html" width="100%" seamless></iframe>

    the only issue is: i can’t get rid of the scroll bar on the desktop (on mobile it works – although when opening the menu, the whole content moves down as it is set with margin-top and not position fixed).
    there is a “margin-top 32px !important;” for the html for media=”screen”. If that is removed the social bar disappears, but the scrollbar with it.
    I could also deduct 32px from the height i set the div/iframe to, however then i have a bar on the bottom if i go on the side on a mobile device.

    How is that media influenced? can i deduct the 32 only for the media=”screen”? Or is there another way of setting overflow:hidden; so that it will work?

    March 27, 2015 at 1:54 pm #236623

    Zeshan
    Member

    Hi there,

    Glad to hear that 🙂

    In regards to that 32px margin, that will only be visible when you are logged in as this is added by WordPress itself to show their admin bar (see: http://prntscr.com/6m38o9) at the top of the page. That means, your users won’t see that gap and scrollbar, you can also check that by logging out to your admin panel.

    Thanks!

    March 30, 2015 at 2:42 am #237850

    PlanBAgenturStuttgart
    Participant

    huh. Funny. I usually check the page in a private tab as well (as to see how it looks when not logged in) but didn’t even notice the scroll bar not being there.

    March 30, 2015 at 2:53 am #237852

    Paul R
    Moderator

    Hi,

    Let us know if you have any further questions.

    Thanks

    March 30, 2015 at 5:30 am #237961

    PlanBAgenturStuttgart
    Participant

    Since it is remotely related:
    I’m still having trouble with the fullscreen revolution slider. I’m using a portfolio slider with the according template set to full width and the offset with .masthead.
    I also added the following peace of CSS to the customize option:

    .x-slider-container.below {
  border-bottom: 0;
}

    However there is still a scrollbar visible and I’m not sure what is causing it. It’s only because of a pixel or two.
    link to the site: http://www.planbagentur.de/wordpress/portfolio/

    Furthermore: is there an option to have the Slider fullscreen like the panoramic page above? The Offset would need to be determined by the .masthead but it would need to move the slider instead of making it smaller.

    And: Can i pull the image description from the media file automatically into a template layer in the sliders? So I don’t have to create a new layer every time I add a portfolio item?

    March 30, 2015 at 5:47 am #237978

    Zeshan
    Member

    Hi there,

    #1: The reason is that, you are using slider with shadow (see: http://prntscr.com/6n77cj) that’s causing extra space at the bottom. To avoid this, you’ll need to remove the shadow under your slider’s settings (see: http://prntscr.com/6n78nv).

    #2: That isn’t possible out of the box. It could be possible with custom CSS customizations to your navbar, but would fall outside the scope of support we can provide. You may wish to consult a developer to assist you with this.

    Meanwhile, the CSS should be similar to this (only for desktop, will require more deep CSS for mobiles, tablets, et cetera):

    @media (min-width: 980px) {
    .masthead {
        margin-bottom: -111px;
    }
}

    And you’ll need to remove .masthead under your slider’s offset containers.

    #3: In that case, I’d advise you to review Revolution Slider’s documentation. As Revolution Slider is a 3rd party plugin, regretfully, we have limited support for it that covers its compatibility issues with X. So any question related to transitions, animations or how the certain feature of the slider works, would be getting outside the support we can offer.

    You can review our Kb article on Revolution Slider for more information.

    Thanks!

  • Author
    Posts
1 2 3