Jump to content

How to Make Summary Blocks the same height

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: http://www.found-hired.com

I am looking to make the summary blocks the same height I am currently using some code to make the summary look how it is at the moment however I am struggling to get the blocks all the same height.

I would like if possible, for the excerpt to be cut off if it extends past a certain point so they all line up nicely.

Any suggestions?

Screenshot 2022-03-22 121707.png

Link to comment
  • Solution

Add to Design > Custom CSS

/* Equal summary block height */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1646742740261_7958 .summary-excerpt.summary-excerpt-only {
    min-height: 120px;
}
}

 

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
  • 1 month later...
On 5/20/2022 at 12:42 AM, dnmddy said:

@tuanphan I'm fixing the height on my summary grid as well and wondering if you can help align the excerpt to the bottom of the block so the variable space is between the excerpt and the meta data/title?

Can you share link to page where you use summary? 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
16 hours ago, dnmddy said:

of course: https://vc3.squarespace.com/clients-grid
password: notyet

Use this code

div#page-section-6286620aa09a760a1808b080 .summary-excerpt.summary-excerpt-only {
    position: absolute;
    bottom: 0;
}

 

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
11 hours ago, dnmddy said:

thank you @tuanphan! Do you know if it's possible to make the entire block link to the post?

With Personal Plan, you can enable read more, then I will give code to make link cover whole box + make read more transparent

With Business Plan, let me know, I will give code to make title link cover whole box

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
12 hours ago, tuanphan said:

With Personal Plan, you can enable read more, then I will give code to make link cover whole box + make read more transparent

With Business Plan, let me know, I will give code to make title link cover whole box

That's great! Business plan solution, please! 

Link to comment
20 hours ago, dnmddy said:

That's great! Business plan solution, please! 

Add to Last Line in Code Injection > Footer

<script>
  $("div#block-5f739344ad87578c7e22 .summary-item").click(function(){
		window.location=$(this).find("a").attr("href"); 
		return false;
	});
</script>
<style>
  div#block-5f739344ad87578c7e22 .summary-item:hover {
    cursor: pointer;
}
</style>

 

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
On 5/26/2022 at 6:19 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $("div#block-5f739344ad87578c7e22 .summary-item").click(function(){
		window.location=$(this).find("a").attr("href"); 
		return false;
	});
</script>
<style>
  div#block-5f739344ad87578c7e22 .summary-item:hover {
    cursor: pointer;
}
</style>

 

This is working except it's making the whole summary item link to the map link instead of the title/post. I am using the location field for displaying the city/state, but I dont want it or anything to link to a map. Can the JS be changed to pull the title link for the whole item instead of the map link?

Link to comment
15 hours ago, dnmddy said:

This is working except it's making the whole summary item link to the map link instead of the title/post. I am using the location field for displaying the city/state, but I dont want it or anything to link to a map. Can the JS be changed to pull the title link for the whole item instead of the map link?

You can remove the code. Then we will check it again

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
  • 2 weeks later...

Try this new code

<script>
  $("div#block-5f739344ad87578c7e22 .summary-item").click(function(){
		window.location=$(this).find(".summary-title-link").attr("href"); 
		return false;
	});
</script>
<style>
  div#block-5f739344ad87578c7e22 .summary-item:hover {
    cursor: pointer;
}
</style>

 

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

Create an account or sign in to comment

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

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