Keeping header image height constant for different sized windows

dipanjan94

1. I was trying to check how my homepage behaves when I shrink the size of the window. My screen resolution is 2560 x 1440. I have a noticed that as I decrease the length of my window, my homepage header image shrinks both in length and breadth. Is there any way to tweak this so that the height of the image remains constant throughout, until it's less than a particular threshold where the separate header image for my phone ( I have it already) takes over? (Have a look at zizka.ca to understand what I mean. Although I know it's a Squarespace site)

2. Also, I know there is something in my css which decides when the menu will be shrinked to an accordion, depending on the screen width. I would like to increase the threshold, but I'm not sure which line does it. Could anyone help me out with it?

Hikin' Mike

@dipanjan94 said:
1. I was trying to check how my homepage behaves when I shrink the size of the window. My screen resolution is 2560 x 1440. I have a noticed that as I decrease the length of my window, my homepage header image shrinks both in length and breadth. Is there any way to tweak this so that the height of the image remains constant throughout, until it's less than a particular threshold where the separate header image for my phone ( I have it already) takes over? (Have a look at zizka.ca to understand what I mean. Although I know it's a Squarespace site)

I would think that how your site behaves is better than that other site. I would rather see the whole image, decreasing in size (proportionally) than chopping the right side. But if that's what you want then remove the width: 100% and max-width: 100% !important; here:

.desktop {
  width: 100%;
  max-width: 100% !important;
}

2. Also, I know there is something in my css which decides when the menu will be shrinked to an accordion, depending on the screen width. I would like to increase the threshold, but I'm not sure which line does it. Could anyone help me out with it?

The break point from desktop to mobile is fixed from SmugMug at 736px. The only way your going to change that is to create your own menu using HTML/CSS.

Hikin' Mike

Just to add about your second question. Even if you were to create your own menu, SmugMug uses Javascript and we can't use it.

dipanjan94

I would think that how your site behaves is better than that other site. I would rather see the whole image, decreasing in size (proportionally) than chopping the right side. But if that's what you want then remove the width: 100% and max-width: 100% !important; here:

On second thoughts, I think you're right, I'd prefer my current design.

The break point from desktop to mobile is fixed from SmugMug at 736px. The only way your going to change that is to create your own menu using HTML/CSS.

Thank you so much.