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

Reducing padding between image and text on image card


cenerie

Question

There is a large gap between my images and the text next to it. They are set as image cards. Is there any way I can reduce this padding / distance?
And also, how do you set the text to align to top of the image, not the middle?
Thanks in advance!

image.png.0686e6a481f1f152c8aa0a267eb4553e.png

Edited by cenerie
adding questions
Link to comment

Recommended Posts

  • 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 - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

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

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

Edited by cenerie
Link to comment
  • 0
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
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0
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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Edited by cenerie
Link to comment
  • 0
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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
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
  • 0

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
  • 0

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

Edited by creedon
version 3

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

Link to comment
  • 0
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.

Edited by creedon

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

Link to comment
  • 0
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
  • 0

Thanks @creedon

I'm no longer getting the error message but it also isn't changing the width of the image relative to the text either in the specific image card you're targeting on my page. It stays at whichever input value (%) I set globally under the DESIGN / IMAGE BLOCKS tab.

Aubrey

Link to comment
  • 0

@creedon

It works perfectly now! Thank you so much!

I have one final question about image cards if I may, which is whether it's possible to change the size of the button to match the regular small button size? The button on the image card seems closer in size to the medium option when you add a button by itself...

On the home page I have a stand alone button (sized small) in the first section and an image card with a button in the second section. Can I get the image card button to be the same size as the button in the first section?

https://collie-chameleon-jdn3.squarespace.com/

(site password is: aubreyswebsite)

I understand if you feel you've already done enough here. I'm very grateful in any case!

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