Position image at the bottom of a section

Hi !

I have an image of a scroll wheel that I would like to put at the bottom of the section : (erwanlier.com)

I have tried to set this image to "position absolute" with "bottom : 0", but it makes it disappear. Any help ?

Thank you !

Can you add that image back as shown in the picture? Then it will be easier to figure out the problem.

Absolute positions within it's container. If your container bottom runs below the bottom of the viewport then the image will disappear.

If you want the image to stick to the bottom of the viewport try position fixed.

On 6/20/2021 at 6:53 PM, aravsanj said:

Can you add that image back as shown in the picture? Then it will be easier to figure out the problem.

Done.

22 hours ago, creedon said:

Absolute positions within it's container. If your container bottom runs below the bottom of the viewport then the image will disappear.

If you want the image to stick to the bottom of the viewport try position fixed.

I have tried, but the image always disappear, like if it was behing the image background ...

3 hours ago, Erwan said:

Done.

Try this:

 #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper {
	padding-bottom:0px !important;
	position:absolute !important;
	bottom:-100px;
    }

21 hours ago, aravsanj said:

Try this:

 #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper {
	padding-bottom:0px !important;
	position:absolute !important;
	bottom:-100px;
    }

 

Thanks, it almost work like I would like. 

The thing is, depending of the size of the screen (4k or mobile), it is not position welled

on 1080 it's okay :

on mobile not really :

Well the image is removed again so I cannot test the code
Try this:

 #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper {
	padding-bottom:0px !important;
	position:absolute !important;
	bottom:-2vh;
    }

21 hours ago, aravsanj said:

Well the image is removed again so I cannot test the code
Try this:

 #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper {
	padding-bottom:0px !important;
	position:absolute !important;
	bottom:-2vh;
    }

Strange, the image is still there ... 
I had to adjust the "-2vh", and I tried top and bottom but there is still the problem, If I want it to be really close to the bottom, when I switch to mobile, it's cropped.

The following solution requires the business plan or above.

Remove the scroll down icon image block.

Add the following to Page Settings > Advanced > Page Header Code Injection for the home page.

<!--

  begin add scroll down icon to bottom of first page section
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : jQuery
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    #scroll-down {
    
      bottom : 10px;
      
      }
      
    </style>
    
  <script>
  
    const ids = [
    
      'scroll-down',
      
      ];
      
    const url = 'https://images.squarespace-cdn.com/content/v1/5eedccbef70ff2565afd836e/1624184860179-9V6MWEL0IULBQGQW2IHZ/noun_scroll-down_54414-80.png';
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    #scroll-down {
    
      display : inline !important;
      left : 50%;
      position : absolute;
      transform : translate( -50%, 0 );
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      // add image tags to first page section
      
      var $section = $( ':not( #footer-sections ) > .page-section:first' );
      
      if ( ! $section.length ) return; // bail if no section
      
      $.each ( ids, function ( ) {
      
        $imageTag = $( '<img src="' + url + '" style="display : none;">' )
        
          .attr ( 'id', this )
          
          .appendTo ( $section );
          
        } );
        
      } );
      
    </script>
    
  <!-- begin add scroll down icon to bottom of first page section -->

This should address the issue with the image moving around relative to the bottom of the first page section, desktop vs mobile.

It is based on a similar need another member had.

Let us know how it goes.

Thanks for your help but I don't have the business plan ...

On 7/3/2021 at 7:52 PM, Erwan said:

Thanks for your help but I don't have the business plan ...

Try edit Site Footer >> Add a Markdown Block >> Paste above code ☠️