Jump to content

Reducing padding between image and text on image card

Recommended Posts

  • Replies 27
  • Created
  • Last Reply

Hi Tuanphan, the site in a trial one so I don't know if you can see it? Otherwise it is https://flower-chinchilla-4ky7.squarespace.com/shop/bls

I changed things around. But when you squash the browser narrow you'll see the image and text side by side. I want to reduce the gap in between.

I tried something like 

.image-card {

    padding-left: -15px !important;

   margin-left:-80px!important;

}

I think, i deleted it so I don't remember -- while it did eliminate the gigantic gap, but when you resize it to a point the image is above the text, the text is aligned all the way exceeding the image. So it didn't work.

image.thumb.png.9a6457b1dce4eb50966ccbb2852cc2b4.png

Link to comment
28 minutes ago, cenerie said:

I don't think I can make it password protected because I am in the trial phase?

When I went to your site it challenged me for a password so it appears to be working. Without the password we can't get in to see if we can help.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Just now, creedon said:

When I went to your site it challenged me for a password so it appears to be working. Without the password we can't get in to see if we can help.

 

OK I figured it out. The pw is HelloKitty135
This is the page: https://flower-chinchilla-4ky7.squarespace.com/shop/bls
Again, you have to resize/squash the browser down to a point the image is next to the text to see the wide gap. I'd like to reduce the gap. Thank you so much in advance --

 

Link to comment

Put the following in Design > Custom CSS if you want a site wide change.

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

  margin-left: 0px;
  
  }

If you want to narrow the effect to certain pages then wrap the CSS in a script tag and put it in Page Settings > Advanced > PAGE HEADER CODE INJECTION or a Page code block.

<script>

  .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper {
  
    margin-left: 0px;
    
    }
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
9 hours ago, creedon said:

Put the following in Design > Custom CSS if you want a site wide change.


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

  margin-left: 0px;
  
  }

If you want to narrow the effect to certain pages then wrap the CSS in a script tag and put it in Page Settings > Advanced > PAGE HEADER CODE INJECTION or a Page code block.


<script>

  .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper {
  
    margin-left: 0px;
    
    }
    
  </script>

Let us know how it goes.

That worked! Thank you so much Creedon!


I do have several other CSS customization on the Custom CSS already. I wonder if it slows down the site because of all that? I already wonder because the rest of my site sometimes can take a while to load, or things get broken. I don't know if that's because I am still in trial, or if once I switch it to be a paid site it will be OK. Thoughts?

Link to comment
5 hours ago, cenerie said:

I do have several other CSS customization on the Custom CSS already. I wonder if it slows down the site because of all that? I already wonder because the rest of my site sometimes can take a while to load, or things get broken. I don't know if that's because I am still in trial, or if once I switch it to be a paid site it will be OK. Thoughts?

It is possible to slow things down but I'd look at other potential reasons first. When you are seeing these slow downs are you in editing mode on your website? If so then things will load more slowly because SS is loading all the admin interface.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
6 hours ago, creedon said:

It is possible to slow things down but I'd look at other potential reasons first. When you are seeing these slow downs are you in editing mode on your website? If so then things will load more slowly because SS is loading all the admin interface.

I see, that's probably the reason, I hope! (yes I was looking at it through admin interface, the way it broke and doesn't load...etc. made me wonder if I really should switch to SS) Thank you Creedon.

Link to comment
15 minutes ago, cenerie said:

I see, that's probably the reason, I hope! (yes I was looking at it through admin interface, the way it broke and doesn't load...etc. made me wonder if I really should switch to SS) 

You can always log out of your site and look at it without the admin interface or use a private browsing window (incognito on Chrome) to judge performance. Your site would need to either be public or be set up with a site-wide password.

As to the glitches in SS's admin interface. It does occasionally have issues. But I've never seen SS suffer from chronic persistent problems. I know glitches are frustrating but when they occur, I use it as an opportunity to take a break! 🙂 If you feel an issue is going on to long, be sure to hit up SS customer support and let them know.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

You can always log out of your site and look at it without the admin interface or use a private browsing window (incognito on Chrome)

Hi,
Also you can use this trick!
https://URL.com/?noredirect
Just use the ?noredirect at the end of your URL.

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 3 months later...
On 9/14/2020 at 6:34 AM, creedon said:

Put the following in Design > Custom CSS if you want a site wide change.


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

  margin-left: 0px;
  
  }

If you want to narrow the effect to certain pages then wrap the CSS in a script tag and put it in Page Settings > Advanced > PAGE HEADER CODE INJECTION or a Page code block.


<script>

  .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper {
  
    margin-left: 0px;
    
    }
    
  </script>

Let us know how it goes.

I have  a similar issue... I'm wondering if it's possible to limit the width of the text in an image card (site wide) so that the sentence length doesn't get too long on large screens... Can you set a maximum character width using css, for example? Or can it be achieved in another way? Many thanks for any help!

Link to comment

@aubreywade

Please post the URL to a page where you want to narrow the text in an image card.

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

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi @creedon

Thanks so much for your quick response! Here's the link to the page in question:

https://collie-chameleon-jdn3.squarespace.com/lives-of-unbelief/religion-of-humanity

and the password is: aubreyswebsite

You'll see the first section on the page is an image card with text. The second section duplicates the same content but tries to achieve the desired result using an image with text placed beside it in another column with spacers. However, this option isn't responsive to different screen sizes in an optimal way. I'd rather use the image card but set a max text width using css so that on big screens the image can scale big whilst maintaining a readable text width. As I'll have many pages like it, I prefer to go with a global css solution but would also be able to insert it using the PAGE HEADER CODE INJECTION as you suggested above.

The other question that's just occurred to me is whether it's possible to change the column distribution between the image and text of the image card from 50/50 to something more like 70/30 using the PAGE HEADER CODE INJECTION perhaps? This would display images in horizontal format much more nicely beside the text, as I've just tried in section 3 on the same page. This would be in addition to setting a maximum text width.

Many thanks!

Link to comment

I've just realised that you can set the image width (%) for image cards globally in the design section of the squarespace designer, but it would be great to override that for specific image cards, or the specific section they appear in (such as the third section on the example page) if possible so that I could apply it selectively to horizontal format images only. 

Link to comment
On 1/10/2021 at 9:20 AM, aubreywade said:

it would be great to override that for specific image cards, or the specific section they appear in (such as the third section on the example page) if possible so that I could apply it selectively to horizontal format images only.

Add the following to Design > Custom CSS.

// change image card image to text widths ratio for v7.1 site, using LESS syntax

#block-b4008840523cf38f74e7 {

  @image-width: 75%; /* how much the image takes up of the total width (100%)
                        available */
  
  // do not change anything below, there be the borg here
  
  .design-layout-card:not( .sqs-narrow-width ) {
  
    > div:first-child {
    
      width: @image-width - 2.5%;
      
      }
      
    .image-card-wrapper {
    
      width: 100% - @image-width - 2.5%;
      
      }
    }
  }

This is for a v7.1 and specific to aubreywade's site. It needs to be modified to work on other v7.1 sites.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 1/10/2021 at 7:47 AM, aubreywade said:

I'd rather use the image card but set a max text width using css so that on big screens the image can scale big whilst maintaining a readable text width.

Add the following to Design > Custom CSS.

/* change width of image card text */

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

  width: 75%;

  }

This is for a v7.1 and specific to aubreywade's site. It needs to be modified to work on other v7.1 sites.

This is an example to show that you can add more space around the text of an image card. All of the code only effects specific blocks but could probably be adapted to sections of pages and the whole site if needed.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 1/10/2021 at 11:49 PM, creedon said:

Add the following to Design > Custom CSS.


/* change image card image to text widths ratio for v7.1 site */

#block-b4008840523cf38f74e7 {

  /* how much the image takes up of the total width (100%) available */
  
  --image-width: 50%;
  
  }
  
#block-b4008840523cf38f74e7.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) > div:first-child {

  width: calc( var( --image-width ) - 2.5% );
  
  }

#block-b4008840523cf38f74e7.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) .image-card-wrapper {

  width: calc( 100% - var( --image-width ) - 2.5% );
  
  }

This is for a v7.1 and specific to aubreywade's site. It needs to be modified to work on other v7.1 sites.

Let us know how it goes.

Hi @creedon

When I add this into the custom CSS section it gives me the following error message:

Operation on an invalid type

Am I doing something wrong?

Link to comment

@aubreywade

I am unable to reproduce that error. Was this a syntax error when you entered the CSS? Or some other error like as SS error? Can you provide a screen shot to give us more context?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@aubreywade

Totally my bad. I updated my code post.

Folks, watch out when using CSS variables in Custom CSS. The version of LESS SS uses doesn't like them. Second time I was burned on that. Third times a charm eh? 🙂

Give it a go and let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.