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

Reducing padding between image and text on image card

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

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0
On 9/11/2020 at 11:58 PM, IXStudio said:

Hi,
You need to make the website password protected instead of private.

Best,
Leopold

HI Leopold,

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

Share this post


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


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 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 --

 

Share this post


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


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 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?

Share this post


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


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 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

Share this post


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


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...