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 ☠️

Hi @creedon, may I ask how I can place one text block in the full-screen section middle right, and another bottom left (fixed position to screen bottom)?

my link: gardenia-collie-ekrp.squarespace.com

Great thanks!

11 hours ago, caminada said:

how I can place one text block in the full-screen section middle right, and another bottom left (fixed position to screen bottom)?

Set up your grid and block like the following. The grid should be 5 rows.

Add the following to Website > Pages > Website Tools > Custom CSS.

[ data-section-id="6509cad63cf1952454595522" ] {

  padding-top : 0 !important;
  
  }

.fe-block-yui_3_17_2_1_1704746352505_1283 {

  position : fixed;
  bottom : 3em;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

12 hours ago, creedon said:

Set up your grid and block like the following. The grid should be 5 rows.

Add the following to Website > Pages > Website Tools > Custom CSS.

[ data-section-id="6509cad63cf1952454595522" ] {

  padding-top : 0 !important;
  
  }

.fe-block-yui_3_17_2_1_1704746352505_1283 {

  position : fixed;
  bottom : 3em;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

kindly ask, if possible only fix it on the corner of the first section, not on the screen corner.

I hope it always keep the same distance to the first section's bottom, and the position is adaptive browser size

could it be understood? 

thank you!

10 hours ago, caminada said:

if possible only fix it on the corner of the first section, not on the screen corner.

I think it is possible but would require JavaScript to track where the bottom of the section is and use those values in CSS to adjust where the block is.

I know of no code that currently does this and of course you'd need the business plan or above.

On 6/6/2024 at 10:51 PM, creedon said:

I think it is possible but would require JavaScript to track where the bottom of the section is and use those values in CSS to adjust where the block is.

I know of no code that currently does this and of course you'd need the business plan or above.

Dear @creedon, thanks for helping. We will take the business plan. May I ask for the code to achieve that? then I will install it and go online soon. Thank you!

Upon further thinking I think I have a better way than my tracking thought.

First remove any CSS related to moving the...

Alig Grossküchen

historias
culinaricas

...text block. Make a copy somewhere.

Please see the following.

This code will allow us to move the previous mentioned text block into a spot where CSS can be applied to attach it to the bottom of the section.

Replace the example settings provided in the code with the following.

      '.fe-block-yui_3_17_2_1_1704746352505_1283' : {
      
        selectorDestination : '#page .page-section:first-child',
        
        action : 'append', // value is append, prepend or replace
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        selectorParentDestination : '[enter selector parent destination here between single quotes replacing square brackets]',
        
        // selectorCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        sourceCopy : false,
        
        },
        

Finally we need some new CSS to style the text block.

.fe-block-yui_3_17_2_1_1704746352505_1283 {
  
    bottom : 2vh;
    left : 2vw;
    position : absolute;
    
    }

Let us know how it goes.

On 6/9/2024 at 1:08 AM, creedon said:

Upon further thinking I think I have a better way than my tracking thought.

First remove any CSS related to moving the...

Alig Grossküchen

historias
culinaricas

...text block. Make a copy somewhere.

Please see the following.

This code will allow us to move the previous mentioned text block into a spot where CSS can be applied to attach it to the bottom of the section.

Replace the example settings provided in the code with the following.

      '.fe-block-yui_3_17_2_1_1704746352505_1283' : {
      
        selectorDestination : '#page .page-section:first-child',
        
        action : 'append', // value is append, prepend or replace
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        selectorParentDestination : '[enter selector parent destination here between single quotes replacing square brackets]',
        
        // selectorCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        sourceCopy : false,
        
        },
        

Finally we need some new CSS to style the text block.

.fe-block-yui_3_17_2_1_1704746352505_1283 {
  
    bottom : 2vh;
    left : 2vw;
    position : absolute;
    
    }

Let us know how it goes.

Dear @creedon, thank you very much for your code. I tried to understand and install it but didn't achieve the effect, sorry for that. Anyway, the client changed again their requirements, for now no need that effect any more.

May I kindly ask another help for with this website. When the /home page is loading, the slideshow gallery images loading too short in one time which gives a flash feeling. I hope to slow down the images showing process like a fade-in effect. Could you help me with that? Many thanks!

Link: https://gardenia-collie-ekrp.squarespace.com/

19 hours ago, caminada said:

Dear @creedon, thank you very much for your code. I tried to understand and install it but didn't achieve the effect, sorry for that. Anyway, the client changed again their requirements, for now no need that effect any more.

May I kindly ask another help for with this website. When the /home page is loading, the slideshow gallery images loading too short in one time which gives a flash feeling. I hope to slow down the images showing process like a fade-in effect. Could you help me with that? Many thanks!

Link: https://gardenia-collie-ekrp.squarespace.com/

 

Screen Recording 2024-06-19 at 17.22.37.mov 8.9 MB · 1 download  

 

 

@creedon Hi, just want to let you know, about my gallery flash issue already found the solution at the end of the tutorials. Many thanks!

https://www.will-myers.com/articles/how-to-slow-down-the-fade-transition-in-a-squarespace-gallery-slideshow