cenerie Posted September 11, 2020 Share Posted September 11, 2020 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! Link to comment
tuanphan Posted September 11, 2020 Share Posted September 11, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cenerie Posted September 11, 2020 Author Share Posted September 11, 2020 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. Link to comment
IXStudio Posted September 12, 2020 Share Posted September 12, 2020 Hi, You need to make the website password protected instead of private. Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
cenerie Posted September 14, 2020 Author Share Posted September 14, 2020 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? Link to comment
creedon Posted September 14, 2020 Share Posted September 14, 2020 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
cenerie Posted September 14, 2020 Author Share Posted September 14, 2020 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
creedon Posted September 14, 2020 Share Posted September 14, 2020 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
cenerie Posted September 14, 2020 Author Share Posted September 14, 2020 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
creedon Posted September 14, 2020 Share Posted September 14, 2020 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
cenerie Posted September 15, 2020 Author Share Posted September 15, 2020 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
creedon Posted September 15, 2020 Share Posted September 15, 2020 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
IXStudio Posted September 15, 2020 Share Posted September 15, 2020 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
aubreywade Posted January 9, 2021 Share Posted January 9, 2021 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
creedon Posted January 10, 2021 Share Posted January 10, 2021 @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
aubreywade Posted January 10, 2021 Share Posted January 10, 2021 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
aubreywade Posted January 10, 2021 Share Posted January 10, 2021 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
creedon Posted January 10, 2021 Share Posted January 10, 2021 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
creedon Posted January 10, 2021 Share Posted January 10, 2021 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
aubreywade Posted January 13, 2021 Share Posted January 13, 2021 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
creedon Posted January 13, 2021 Share Posted January 13, 2021 @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 Posted January 13, 2021 Share Posted January 13, 2021 It appears when I copy the code into the custom CSS editor. Here's a screenshot: Thanks Link to comment
creedon Posted January 13, 2021 Share Posted January 13, 2021 @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
aubreywade Posted January 14, 2021 Share Posted January 14, 2021 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
creedon Posted January 15, 2021 Share Posted January 15, 2021 @aubreywade Please give my, yet again, updated code another go. 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.