Jump to content

Make section static instead of parallax, Fix footer layout

Recommended Posts

Site URL: https://michaelkelleher.co/

I want the about me section background with the image of myself to be static instead of parallax so people can actually see the whole image

Section ID: 618d41f1a5ce51403f86316a

Parallax scrolling code injection in the quote below...

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: 0,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

 

I want the footer to be laid out like the image below but I am having trouble with spacing and layout.

What I want footer to look like image

Custom CSS for footer so far is below...

Quote

// Top Footer //

[data-section-id="6209678b0184b53a628f7d2c"] {
  height: 130px !important;
  min-height: unset !important;
  .content-wrapper {
    padding-top: 30px !important;
  }
.content {
    width: 70% !important;
}
.image-block {
    width: 8%;
    margin: 0 auto;
}
}

// Footer Seporator 2 //

[data-section-id="62096927303be013b29f70bf"] {
  min-height: unset !important;
  height: 1px !important;
}

// Footer Seporator //

[data-section-id="6206fb4a93dd371732efbc7e"] {
  min-height: unset !important;
  height: 1px !important;
}
 

 

Link to comment
  • Replies 2
  • Views 246
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.