asked on

Designate size of homepage to show via CSS

I'm sure this is a responsive web question but I am not sure what to look for online.

We'd like to build our homepage to show only a certain section of the site regardless of screen size. Not in width, but height.

Here is a sample of our current page.
www.faithfamilyshiloh.org

We'd like the scrolling banner and 4 buttons below to be all that shows on the homepage initially, until the user scrolls down. It's working now for most browsers, but we've found that some large screen sizes are showing more down below.

is there something I can setup to force what gets shown when the user initially visits the page?

Scott Fell

It looks like you just need to make the buttons responsive or the width a %.

Do you want some div's to show up on the first page load, then the viewer goes to another page and comes back and that content is gone? Or do you just want to give the user an option to show/hide?

Gary

What you need to be looking at is a parallex theme, but for the sake of that homepage it would be kind of a lot of work for little reward.
Either that or hide everything below and track the scrollbar with js and when they scroll down set the content to visible - but seems kinda yuck

axessJosh

ASKER

I really just want the image and bottom buttons to show regardless of browser size... this may not be possible but I'd like all the content to be there, but perhaps an encapsulating homepage <div> that resizes by browser window?

Gary

Since you are using jquery
Wrap your slide show and boxes in a div and give a class of main and add this code

<script>
$(function() {
$(".main").css("height",$(window).height())
})
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

axessJosh

ASKER

I did this, but now it added a huge margin between the <div> i setup to show and the next content. Is this a conflict with other CSS i have setup or just what is happening with the jquery code you sent? If we could have that not so wide, it'd be nice.

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

axessJosh

ASKER

I did just set it up in a div to encapsulate the slider and lower images. To not cause a conflict with another .main i updated the code to use a class of .home

<div id="container">
			<div id="content-home" role="main">
			<div class="home">
            	<div id="slider">
			<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
            	</div><!-- #slider -->
	<div id="wrapper" class="hfeed">		
<div id="main-home">            
            	<div id="home-lower-images">
                	<div class="lower-image">
                    Current News
                    </div><!-- lower-image 1-->
                    <div class="lower-image">
                    <a href="/about/times-location"><img src="<?php bloginfo('template_directory'); ?>/images/time-location.png" /></a>
                    </div><!-- lower-image 2-->
                    <div class="lower-image">
                    <a href="/something-for-everyone/kidztown/"><img src="<?php bloginfo('template_directory'); ?>/images/ffc-forkids-button.png" /></a>
                    </div><!-- lower-image 4-->
                    <div class="lower-image">
                    <img src="<?php bloginfo('template_directory'); ?>/images/ffc-messages-button.png" />
                    </div><!-- lower-image 5-->
                </div><!-- home-lower-images -->
			</div><!-- .home ---- this should setup to only show the content above on the homepage -->
                <div id="home-welcome">

Open in new window

Gary

That's not how your code is looking. You need to actually move the home-lower-images div. And close the home div after the home-lower-images div

Also make the jquery changes in the previous comment to eliminate a jquery conflict in WP

axessJosh

ASKER

I guess I'm completely lost then because it looks to me that is exactly what I have setup.

I added:

<div class="home"> directly above the slider <div>

then..

</div> directly below the closing div tag for home-lower-images to close that div class.

axessJosh

ASKER

oops, found a conflict in another div causing the issue.

I'll amend.