queue  17
support
Results 1 to 5 of 5

Thread: Can I make hompageslider fill height of screen?

  1. #1
    Junior Member
    Join Date
    Dec 2017
    Posts
    5

    Can I make hompageslider fill height of screen?

    Hi,

    Apologies if this has been asked before, but I'm unable to find anything on it in this forum.

    Essentially, I've created a divider between the home page and following page, but would like the homepage image (I am using only one, not a series for the slider) to fill the screen and for the divider to only appear when the page begins to be scrolled. Is that possible?

    Also, can you please let me know how to adapt the code to turn the dividers off for mobile? Is that even possible?

    Many thanks!

  2. #2
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    2,074
    Hi, Just create a gallery with one large image in it. Then use the home page template and set this gallery to be the "slider Gallery" in the home page template's settings. Does this work for you? All default home pages using the "home" template have fullscreen images. So set a page template, in the edit page screen in the admin, you select it on the right side sidebar.

  3. #3
    Junior Member
    Join Date
    Dec 2017
    Posts
    5
    Hi Donagh,

    Many thanks for this - I managed to work it out a slightly different way so all is well.

    That said, could you please let me know if I can use dividers in the desktop version, but turn them off for tablet and mobile? They don't function the same in the latter versions.

    Many thanks
    Last edited by AWakeling; 01-09-2018 at 13:22. Reason: spelling error

  4. #4
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    2,074
    Hi, Yes our theme adds a class of "mobile" to the html tag when a mobile device is detected, so you can use this to hide things on mobile devices like this (past your modified snippet into the custom css field in the theme options panel):

    Code:
    .mobile section#id_of_section_to_hide {
    display:none !important;
    }
    All you'll need to do is insert this snippet once for each section you would like to hide and in each one, include the ID of the section. The ID of the section is usually the page slug (which come from the page title) but you can check the page source to find the correct ID or use the browser dev tools element inspector. Just insert the id in place of the "id_of_section_to_hide" in the above snippet and paste it into the custom css field - save and that's it.

  5. #5
    Junior Member
    Join Date
    Dec 2017
    Posts
    5
    Donaugh, that's fantastic, thanks so much!