[Solved] What is controlling the height of this section?

[dmatranga]

Having to go in to someone else’s design and fix some issues a client is having. Trying to shorten a section, that is apparently expanding to contain the background image, but I’m not sure.

Just trying to figure out how I can shorten the <section id=”first-container”>. Any help would be much appreciated!

Here’s a link to the website I’m working on: http://www.sipeshouston.org/

Here’s a link to an excerpt on CodePen: http://codepen.io/dmatranga/pen/raEyPj

[will0220]

Hi dmatranga, it looks like that height is being generated by JavaScript, as it’s inline and you’ll see it change when you resize the window. Unfortunately the only sources I could find were minified so I can’t help you there. I’m not sure if you can use a pure CSS3 solution, but on the section .bgcontainer-1 you can add the following to constrain your background:

background-size:cover;
background-position:center top;

If you can’t find where in the JavaScript the height is being set, then set both the min-height and max-height of both .bgcontainer-1 and #first-container instead of the height. If you’re desperate, you could also set your height declaration on those sections to !important in the CSS. Hope this helps!

[dmatranga]

Will, thank you so much for the reply. Going to try it and see if that does the trick and will update here with results.

It can be frustrating at times going back through someone else’s code, for instance in the ‘master.css’ file alone, there are over 4,800 lines of code. Seems a little excessive to me.

[Author]

Posts