Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing image width for image block: card on one page


Lepismatidae

Question

I'm wanting to change the image width of these "card" image blocks on just one page while leaving the other settings and other pages intact, as I use the block on other pages and like the setting there. The image is too large on our staff page, though. I can't seem to find the correct class to adjust the image width without affecting the "stack" image blocks on the same page.

 

Default setting in Design > Styles, which I want on all other pages

Width50.png

 

What I want on this page only:

Width25.png

Edited by Lepismatidae
Clarification
Link to comment

15 answers to this question

Recommended Posts

  • 0

Add the following to Design > Custom CSS.

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width) {

  -ms-justify-content: unset;
  justify-content: unset;
  
  }

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {

  min-width: 150px;
  width: 20%;
  
  }

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper {

  margin-left: 5%;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Can you share link to page in screenshot? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@SproutDesignStudio

Please post the URL for the page on your site where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@SproutDesignStudio

Yes change the collection id to...

collection-5ff75ce123b8f237e195b9d3

You may want to give this alternate code a try. It was developed later than the code above.

Add the following to Design > Custom CSS.

/*

  begin change image card, image to text width ratios
  
  Version       : 0.2d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @image-width : 35%; /* how much the image takes up of the total width (100%)
                         available */
  
  /*
  
    the following targets all image cards, if you want to target specific ones
    then put // ( forward slash twice and space ) before the next line. that
    disables the site-wide effect. then use the multi-selector section to target
    specific image cards
    
    */
    
  #imageTextRatio();
  
  /*
  
    multi-selector section
    
    here is where you can build up selectors to target specific image cards.
    when targeting multiple items each line should end with a comma except for
    the last line. following are some examples
    
    targeting a single item
    
      a page
      
        #collection-5ff75ce123b8f237e195b9d3
        
      a page section
      
        #page-section-6019f74588988b10419eb99c
        
      an image block
      
        #block-yui_3_17_2_1_1621396382553_4638
        
    targeting multiple items
    
      image blocks
      
        block-yui_3_17_2_1_1621396382553_4638,
        block-yui_3_17_2_1_1621970255707_4758
        
    */
    
  /* remove this line to use multi-selectors
  
  [enter CSS selector(s) here to target your image card(s)]
  
    {
    
      #imageTextRatio();
      
      }
      
    remove this line to use multi-selectors */
    
  // do not change anything below, there be the borg here
  
  #imageTextRatio() {
  
    .sqs-block-image {
    
      .design-layout-card:not( .sqs-narrow-width ) {
      
        align-items : center;
        
        > div:first-child {
        
          width : @image-width - 2.5%;
          
          }
          
        .image-card-wrapper {
        
          width : 100% - @image-width - 2.5%;
          
          }
        }
      }
    }
    
  // end change image card, image to text width ratios

Let us know how it goes.

Edited by creedon
version 0.2d0

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@creedon I have try some of this code to center the image but no luck.
i mange to change de size of it for mobil with this code


#block-yui_3_17_2_1_1615808058082_3767 {width: 40% !important;
}


but cant find the right code to align centre 

iliafrancis.com/linkinbio

 

thank you

Link to comment
  • 0

@jennypetit

Ah. I think I see where you are going. Try the following to replace the code I previously suggested commenting out.

#block-yui_3_17_2_1_1615808058082_3767 {

  margin-left : auto;
  margin-right : auto;
  width : 40%;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...