var str = "japan producer(s)";
str.split(" ").map(val => val.charAt(0).toUpperCase() + val.slice(1)).join(" ");
"Japan Producer(s)"
Hi guys, I am finalising my portfolio page and I am facing an issue. When I run it on my local, the responsiveness behaviour looks great, but on codepen, it just doesn't happen (not sure I am on the right channel to ask this).
Background info: I built the page using flexbox. I use a media query for screen under 500px which changes the flex-direction from row to column, collapsing everything in a nice, smart-phone friendly layout .
Expected result: When narrowing the browser window to smartphone size, the menu, my info section, and footer, should be displayed with flex-direction: column and collapse.
Actual result: When opening my page on my local, it works like a charm. However, on codepen, the collapsing doesn't happen.
Please forgive my CSS structure, it's a giant mess :grinning:
https://codepen.io/fpiguet/full/GMbjNv/
Any help would be great!
$headerComponent.delay(300).removeClass("unscrolled");
??unscrolled
is getting removed instantly. var $headerComponent = $(".header-wrapper");
$(window).on("scroll", function(){
var displacementFromTop = window.pageYOffset || document.documentElement.scrollTop;
if (displacementFromTop > 0) {
$headerComponent.delay(300).removeClass("unscrolled");
} else {
$headerComponent.addClass("unscrolled");
}
});