Customise Service Section

Site URL: https://rust-kale-a2el.squarespace.com

Hi I am using a Service Section (the one that has circles).

I have tweaked it but I would like more control:

I like how the image is close to the edges but not the text.

And I would like the images to contain a link (the same link the button uses).

Does anyone know if this is possible? 🤔

What is access password?

coatings010 thanks

#1. It looks like you changed layout on mobile?

#2. Add this to Last Line in Settings > Advanced > Code Injection > Footer

<!-- Code by @creedon - I don't remember which post I copied it from -->
<script>

  $( ( ) => {
  
    const selector = '.user-items-list-simple .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
  
  </script>
<style>
  .user-items-list-item-container[data-section-id="632adf148c4a9956d83ff637"] .list-item-media {
    cursor: pointer;
}
</style>

Thank you very much 😃 👍 

Out of curiosity is it also possible to just have the image as the link, and not the text/beige box area?

Is there also a way I can adjust the padding/margin etc. on the text area so it moves in from the sides?

Edit: I can see that it's possible by editing the code, so I wondered is there a way I can apply this in the Code Injection etc?

#1. Possible, but need to adjust the code, I will check it again

#2. Add this code under

<style>
  .list-item-content__description {
    max-width: calc(100% - 20px) !important;
}
</style>

with 20px is padding

Thank you again 😃 👍 

The text now looks great.

I was wondering if you think there would be a solution so the image (and the button) for each product are the only parts that contain the link?

On 10/24/2022 at 8:51 PM, cube said:

Thank you again 😃 👍 

The text now looks great.

I was wondering if you think there would be a solution so the image (and the button) for each product are the only parts that contain the link?

What do you mean, or you mean this? "Out of curiosity is it also possible to just have the image as the link, and not the text/beige box area?"

On 10/26/2022 at 2:08 AM, tuanphan said:

What do you mean, or you mean this? "Out of curiosity is it also possible to just have the image as the link, and not the text/beige box area?"

Yes, so the Image and the button are the only links in the product boxes.

On 10/27/2022 at 4:15 PM, cube said:

Yes, so the Image and the button are the only links in the product boxes.

Try this new code

<script>

  $( ( ) => {
  
    const selector = '.user-items-list-simple .list-item';
    
    $( selector ).each ( function ( ) {
    
      const click1 = $('.list-item-media');
      
      $( click1 ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
  
  </script>
<style>
  .user-items-list-item-container[data-section-id="632adf148c4a9956d83ff637"] .list-item-media {
    cursor: pointer;
}
</style>

Thank you, unfortunately the link on the images does not lead to the product page now.

On 11/1/2022 at 4:36 PM, cube said:

Thank you, unfortunately the link on the images does not lead to the product page now.

If that code doesn't work, I don't know how. You try posting this to Code & Customization box. Maybe someone can help.