responsive height of div: shrink to a breakpoint then start growing again

Question

I'm using an hero section to show some content. It's responsive using the padding-bottom percentage technique and an inner absolute positioned container to center the content.

Now the catch: reaching a breakpoint, let's say 768px, and on lower window size I would like the box to start growing again.

I found some js/jQuery code around the web and was able to get the result but it only works if I load the page when the window is <768px. In that case it works brilliantly. But if the page is loaded in a larger window the below 768px resizing get lost.

This is the html:

<div class="row row-home-hero" id="hero">
    <div class="cont">
        <h1>Title</h1>
        <h2>Subtitle</h2>
        <div class="cta-hero-home">
            <a href="#" class="cta-hero-link">» CTA1</a>
            <span class="cta-hero-spacer">or</span>
            <a href="#" class="cta-hero-link">» CTA2</a>
        </div>
    </div>
</div>

This is the JS. It's a mess since it's a mix from different sources. And I'm using Wordpress so I've to replace some $ with jQuery. Please forgive me :)

function screenClass() {
    if(jQuery(window).innerWidth() < 768) {
        jQuery('.row-home-hero').addClass('small-hero');
    } else {
        jQuery('.row-home-hero').removeClass('small-hero');
        jQuery('.row-home-hero').css("height", "");
    }
}

// Fire.
screenClass();

// And recheck if window gets resized.
jQuery(window).bind('resize',function(){
    screenClass();
});
if (document.documentElement.clientWidth < 768) {
    var $li = jQuery('.small-hero'),         // Cache your element
    startW = $li.width();  // Store a variable reference
    function setMarginDiff() {
    area = 500000;
    width = jQuery('.small-hero').width();
    jQuery('.small-hero').height(Math.ceil(area/width/1.7));
    }
    setMarginDiff();                 // Do on DOM ready
    jQuery(window).resize(setMarginDiff); // and on resize
}

And this is the CSS

.row-home-hero {
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-color: red;

}
.row-home-hero:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 46%;
}
.row-home-hero .cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    text-align: center;
}
a.cta-hero-link {
    display: block;
    width: 100px;
    max-width: 80%;
    line-height: 40px;
    background: white;
    color: #1b9fdd;
    text-transform: uppercase;
    text-decoration: none;
    margin: 10px auto;
    text-align: center;
    font-weight: 500;
    box-shadow: 0px 0px 7px 1px rgba(0,0,0,.4);
}

@media screen and (max-width: 768px) {
    .row-pre-footer .cont div {
        width: 100%;
        padding: 0 5%;
        float: none;
        margin: 0 auto 30px;

    }
    .progetto-footer, .loghi-footer {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 30px;
        float: none;
    }
    .double-box .tib-tab {
        float: none;
        width: 90%;
        margin: 5% auto;
        padding-bottom: 90%;
    }
    .tib-box h2, .tab-box h2 {
        font-size: calc(28px + (46 - 28) * (100vw - 320px) / (768 - 320));
        margin-bottom: 18vw;
    }
    .double-box-inner p {
        font-size: 22px;
        line-height: 30px;
    }
    .row-home-hero.small-hero {
        height: 500px;
    }
    .row-home-hero:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 0;
    }
}

And this is a working demo

Thanks!

possible duplicate http://stackoverflow.com/questions/17927009/centering-absolute-positioned-div-even-after-window-re-size-for-responsive-desi?rq=1 — Hidayt Rahman, Feb 17 '17 at 10:14
I don't think so: this is not about centering div but about responsive height. — molokom, Feb 17 '17 at 10:28

arc · Accepted Answer · 2017-02-17T16:50:56.443

0

I moved the if (document.documentElement.clientWidth < 768) { block inside the resize event. So that it gets called whenever the window is resized.

In the original version, it would only get called when the page was loaded (and only if the screen was smaller than 768). With this adjustment, it will always be rechecked when resized.

I also merged all your code into one smaller function.

var breakpoint = 768
var area = 500000
var target = $('.row-home-hero')

$(window).bind('resize', function() {
  if(window.innerWidth < breakpoint) {
        var width = target.width()
        target.addClass('small-hero')
        target.height(Math.ceil(area / width / 1.7))

    } else {
        target.removeClass('small-hero')
        target.css('height', '')
    }
})
.trigger('resize')

edited Feb 17 '17 at 16:50

answered Feb 17 '17 at 10:19

arc

4,553
5
34
43

Wow that was fast. And easy. It works perfectly, here a [demo](https://jsfiddle.net/ya29s3qe/) – molokom Feb 17 '17 at 10:27
@molokom perfect :) glad to help – arc Feb 17 '17 at 10:31
hey, @arcs, do you have any idea on how to make it work on mobile device? I need the javascript to run before any resize is done because there is no resize, the window is fixed so until the user scroll there is a fixed height. After a scroll the javascript overrides it assigning the right dynamic height. – molokom Feb 17 '17 at 16:01
@molokom yes I do, I made an update to the code. It's also more compact now – arc Feb 17 '17 at 16:51

responsive height of div: shrink to a breakpoint then start growing again

1 Answers1