I'm seeking advice on how to prevent elements from retaining the same inline styles in different breakpoints.
My goal is to adjust styling based on window width, similar to CSS media queries, but with the additional need to increment a numeric value using jQuery due to the limitations of CSS.
However, I've encountered an issue when applying opacity to the first 5 articles in a specific breakpoint. If I resize my browser back down to less than 720px, those articles keep the opacity, which is not desired.
Any assistance would be welcomed and appreciated.
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1 && windowSize <= 479) {
var posTop = 0;
$('#main article').each(function() {
$(this).css('top', posTop + 'px');
posTop += 160;
});
} else if (windowSize >= 480 && windowSize <= 719) {
var posTop = 0;
$('#main article').each(function() {
$(this).css('top', posTop + 'px');
posTop += 240;
});
} else if (windowSize >= 720 && windowSize <= 959) {
$('#main article').slice(0, 5).each(function() {
$(this).css('opacity', 0.4);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});