What would you do? - need opinions on how to address an HTML layout issue

http://www.geniesgameroom.com/ee3/#!/page_Portfolio

I this page needs to be about 3000px in height. The rest of the pages are around 1000px.

Since I have a fixed footer how can I increase the page height without effecting the height of the other pages?


thanks
CavemanLawyerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Hopefully the updated version works for you. Just take care of all of the js errors.
0
 
HagayMandelCommented:
What is the exact problem?
Since your footer is nailed to the bottom of the page (position: fixed; bottom: 0px;), it will always stay there regardless of page's height.
0
 
CavemanLawyerAuthor Commented:
The portfolio page needs to be heightened to about 3100px to show all of the pics. That breaks the other pages.

I need to be able to resize the portfolio page without effecting the other pages.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
CavemanLawyerAuthor Commented:
The #content div
0
 
HagayMandelCommented:
You don't have a div with the id of 'content' on the page!.
The portfolio is displayed in a li tag that you can toggle its display property from none to block.

<li id="page_Portfolio" style="position: absolute; display: block;">

Open in new window

if you define the required height to this li item, nothing will be broken:

#page_Portfolio{
 height: 3100px;
}

Open in new window

0
 
CavemanLawyerAuthor Commented:
That did not work.

I see
<article id="content">

Open in new window

at line 83.
0
 
HagayMandelCommented:
Both elements must get the same height:

<article id="content" style="height: 3100px;">
<li id="page_Portfolio" style="position: absolute; display: block; height: 3100px;">

It should be an inline styling like that to override other css rules.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.