CSS help for forward theme - move content wrapper up the page


(Silje Ryvold) #1

Hello,

I’m using Nick Cates theme “Forward” and I like it a lot, apart from the fact that visitors have to scroll down to see the actual written content on the page - it’s all below the fold (on a desktop), which in my opinion make it a little bit less user-friendly.

Could anyone out there point out a simple line of CSS code that will help me move the content box further up the page? So that at least some of it is immediately visible when people access the site.

Examples for what I mean:

  1. The default layout of the theme - everything is below the fold:
    http://nickcatesdesign.com/preview/rapidweaver/forward/index.html

  2. More what I want - in this case the content box is further up:
    http://nickcatesdesign.com/preview/rapidweaver/forward/pages/contact-form/index.php

  3. This is great - on this page it’s almost all the way up to the top near the nav bar:
    http://nickcatesdesign.com/preview/rapidweaver/forward/tools/sub-1/index.html

I tried to check the code of the above sites but my css skills are so limited I can’t figure out where the desired position of the box / wrapper is defined.

Huge thanks for any help!


(Stuart Henderson) #2

Can you please provide a link to your site so that we can see what might be needed on YOUR page not the Nick Cates Design demo pages.

Thanks.


(Silje Ryvold) #3

Sure! Sorry didn’t think it mattered. Mine is http://www.bedandbooks.no
Thanks for your reply :smile:


(Silje Ryvold) #4

…and while I’m at it, do you or anyone else know what might be going on with the nav bar on the main home page? It’s disappearing and behaving strangely - what could be the cause and how can I fix it?


(Stuart Henderson) #5

With regard to the starting point for your content, this seems to be controlled by the theme.main.cf section.
Something like:

section.theme.main.cf {
    margin-top: -30%;
}

Will get the placement of that content moving, but (from a quick play around with it on your site) it quickly became clear that you would need to use media queries to ensure that the content is placed somewhere sensible for different screen widths. Have a play around with the value in that snippet and if you indicate what kind of height you like best, maybe we could figure out some media queries to get you the effect you seek - while still looking good on each viewport width.

Not sure if the theme offers any built in tools/options for this already?

Good luck,
Stuart