Ghost Plugin Tweak / Stripey Summary Block

Site URL: https://meningitis-foundation.squarespace.com/meningitis-symptoms

Hello.

I ❤️ Ghost Plugins  😉

I'm using one of their summary block plugins and I wondered if someone could help me tweak the code so the height of the containers are fixed. @moovlabs, is this something you can help with?

Here's a link to the plugin;
https://www.ghostplugins.com/steps/5hn28gh9

I have attached a screenshot too,  fingers crossed it's an easy add/fix.

ALSO....is there a way to add the plugin to this specific page only rather than the whole site? Given that I am proofing this with the client at random times, I have removed the CSS as it was effecting 3 other pages visually, so if it's not showing that's why you can't see it.

Cheers
Claire.

What is password?

1 hour ago, tuanphan said:

What is password?

Hey Tuaphan, nice to hear from you.
It's pa33word, you've helped me a few times with this site...thank you! 😉
I will add the code back in now until my client meeting. 

Hi @Claire_auck 👋!

You can set the height for all summary items to be the same with this CSS. Adjust to your liking.

.sqs-block-summary-v2 .summary-item {
  height: 200px;
}

And to target just one page, add the code the page's advanced > header code injection. Add the code between <style>(paste code here)</style>.

Here is an example of that.

<style>.sqs-block-summary-v2 .summary-item {
  min-height: 200px;
  border-top: 5px solid black;
  background-color: #ffffff;
  border-radius: 10px 10px;
  }</style>

Hope this helps! 👻

4 hours ago, moovlabs said:

Hi @Claire_auck 👋!

You can set the height for all summary items to be the same with this CSS. Adjust to your liking.

.sqs-block-summary-v2 .summary-item {
  height: 200px;
}

And to target just one page, add the code the page's advanced > header code injection. Add the code between <style>(paste code here)</style>.

Here is an example of that.

<style>.sqs-block-summary-v2 .summary-item {
  min-height: 200px;
  border-top: 5px solid black;
  background-color: #ffffff;
  border-radius: 10px 10px;
  }</style>

Hope this helps! 👻

Thanks so much for the speedy reply and sorry for the delay.

The 'height' CSS works, however it could be problematic when it responds so I am working through this. (FYI, the content i am dealing with on this page is quite hard to get right and I've tried so many ways to make it work but nothing obvious is coming up and I'm going round and round in circles. If you can think of a different solution I'd be super grateful to hear it 😉)

The second code doesn't seem to work but I'm probably misunderstanding your instructions (sorry). Just to re-cap, the original plugin is in design > custom CSS. Then I add the extra code into the specific page header. The plugin is still displayed on all other pages that feature a summary block.

Also, the colour of the stripe at the top is often displaying black (instead of grey) unless i have the custom CSS tab open then you see the correct colour. Unsure what's happening there?

Any help you could offer would be amazing!