3 replies [Last post]
briandunlea
briandunlea's picture
Offline
newbie
Ireland
Last seen: 6 years 4 weeks ago
Ireland
Joined: 2013-11-11
Posts: 2
Points: 3

Hi all. I'm trying to build a photography site here http://www.briandunlea.com/index_old.html

When the page is resized too small it's possible for the images to move independent of the "floating" navigation bar. The site will be horizontal scrolling. I just can't get the images and nav to lock together. I hope I'm making sense, it's hard to explain.

Thanks in advance,

Brian.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi briandunlea, I think I see

Hi briandunlea,
I think I see what's happening.
Just not really sure what you want to do when the page is small.

You could look into media queries to make changes when the page is small.

briandunlea
briandunlea's picture
Offline
newbie
Ireland
Last seen: 6 years 4 weeks ago
Ireland
Joined: 2013-11-11
Posts: 2
Points: 3

Thanks Tony. I want to lock

Thanks Tony. I want to lock the nav and images so when a page gets smaller the images can't move about freely. The nav is locked good. But the images can be moved out of line with the nav. I don't need the images to change size. I know there's a fix but I'm not experienced enough to think of it. Haven't done any CSS for about 5 years Wink

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Ok what you need to do is

Ok what you need to do is restrict the height and hide the overflow.
You will need to do that down through the dom tree.

html, body{
  height:100%;
}
#pageWrap{
  height:100%;
  overflow:hidden;
}
 
@media screen and (min-height: 600px) {
  #imageContent{
     box-sizing: border-box;
     height: 490px; /* default for non calc support */
     height: calc(100% - 110px);  /* 110 is the approx height of the header */
  }
}

Hope that helps