Incorporating a hero section to display content is my current approach. The design adapts responsively utilizing the padding-bottom percentage strategy, along with an inner container that is absolutely positioned for central alignment of the content.
The challenge emerges when I aim to restore growth to the box upon reaching a specific breakpoint, let's assume 768px, especially on smaller window sizes.
Experiments with various snippets of js/jQuery code sourced online eventually yielded results. However, there is a limitation – the functionality only kicks in if the page loads within a window dimension of <768px. Should the page be loaded in a larger window, this resizing feature below 768px fails to activate.
This snippet showcases the HTML structure:
<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>
As for the JS implementation, it appears somewhat convoluted due to amalgamation from disparate sources. Furthermore, since Wordpress integration is in play, certain instances of $ had to be substituted with jQuery.
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", "");
}
}
// Initiate the function.
screenClass();
// Reassessment upon window resize.
jQuery(window).bind('resize',function(){
screenClass();
});
if (document.documentElement.clientWidth < 768) {
var $li = jQuery('.small-hero'), // Element caching
startW = $li.width(); // Variable assignment
function setMarginDiff() {
area = 500000;
width = jQuery('.small-hero').width();
jQuery('.small-hero').height(Math.ceil(area/width/1.7));
}
setMarginDiff(); // Execute post DOM load
jQuery(window).resize(setMarginDiff); // Continuation during resize
}
The CSS element specifics are outlined below:
.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;
}
...
@media screen and (max-width: 768px) {
...
.row-home-hero.small-hero {
height: 500px;
}
.row-home-hero:before {
display: block;
content: "";
width: 100%;
padding-top: 0;
}
}
Feel free to check out a functional demo via this link.
Your understanding is deeply appreciated!