Updated Horizonal Layout & Added Smooth Scrolling
Set Min heights for blocks so when orientation is landscape it doesnt break. Also added jQuery smooth scrolling so help with interactions.
This commit is contained in:
@@ -371,6 +371,22 @@ input.input-weightsavailable{
|
|||||||
color: #48484A;
|
color: #48484A;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (orientation: landscape) {
|
||||||
|
.b-header{
|
||||||
|
min-height: 136px;
|
||||||
|
}
|
||||||
|
.b-platevisual{
|
||||||
|
min-height: 204px;
|
||||||
|
}
|
||||||
|
.b-calulatorinputs{
|
||||||
|
min-height: 245px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
.b-container {
|
.b-container {
|
||||||
|
|
||||||
|
|||||||
@@ -70,3 +70,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Smooth Scrolling
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
// Add smooth scrolling to all links
|
||||||
|
$("a").on('click', function(event) {
|
||||||
|
|
||||||
|
// Make sure this.hash has a value before overriding default behavior
|
||||||
|
if (this.hash !== "") {
|
||||||
|
// Prevent default anchor click behavior
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Store hash
|
||||||
|
var hash = this.hash;
|
||||||
|
|
||||||
|
// Using jQuery's animate() method to add smooth page scroll
|
||||||
|
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: $(hash).offset().top
|
||||||
|
}, 800, function(){
|
||||||
|
|
||||||
|
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||||
|
window.location.hash = hash;
|
||||||
|
});
|
||||||
|
} // End if
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<!-- Add your site or application content here -->
|
<!-- Add your site or application content here -->
|
||||||
<div class="b-container">
|
<div class="b-container" id="header">
|
||||||
<a name="header"></a><div class="b-header">
|
<a name="header"></a><div class="b-header">
|
||||||
<div class="b-header__container">
|
<div class="b-header__container">
|
||||||
<h1 class="b-header__heading">What are you lifting?</h1>
|
<h1 class="b-header__heading">What are you lifting?</h1>
|
||||||
@@ -96,7 +96,7 @@
|
|||||||
<!-- Options Section -->
|
<!-- Options Section -->
|
||||||
|
|
||||||
<a name="options"></a>
|
<a name="options"></a>
|
||||||
<div class="b-options">
|
<div class="b-options" id="options">
|
||||||
<div class="b-options__weightmanipulators">
|
<div class="b-options__weightmanipulators">
|
||||||
<div class="b-options__inputcontainer">
|
<div class="b-options__inputcontainer">
|
||||||
<div class="b-options__optionsinput">
|
<div class="b-options__optionsinput">
|
||||||
|
|||||||
Reference in New Issue
Block a user