Add vertical line between columns in Prestige theme

[PKL]

Hi, I'm trying to add a vertical line between two columns, and I I think I'm very close to the correct CSS, but not quite.

url: https://persistencegoods.com/pages/story

pw: PersistencE

1) Currently I have this, but I'd like to remove the line with the red arrow, and have both definitions centered under the pronunciation line. I just want one vertical line dividing the two definitions.

This is the relevant Custom CSS that I have for the section: 

.prose.text-start {
border-right: 3px solid;
border-color: rgb(var(--border-color));
padding-right: 4em !important;
}

What do I need to change? 

-------------------------------

2) I'd also like to update the font settings for the headings circled in red below: 

The Prestige theme allows me to update the heading style for this block, which I currently have set to H4, but I'd like to override the H4  property text-transform: uppercase to text-transform: none, only for this section. I am not using H4 anywhere else in the section. I tried adding the following to Custom CSS for the section, but it had no effect: 

H4 {
text-transform: none !important;
}

Can you suggest what I should change?

Thank you!

[DaisyVo]

Hi @PKL 

1. You can use this CSS: 

.multi-column > div:nth-child(1) > .prose.text-start {
    border-right: 3px solid;
    border-color: rgb(var(--border-color));
}

=> this CSS to create border

.prose.text-start {
    padding-right: 4em !important;
}

=> this CSS to padding text

2. I don't understand why it becomes h4 class in your theme, so you can use this code to CSS:

#shopify-section-template--17175540236449__multi_column_MjAtEU p.h4 {
    text-transform: none;
}

This is result:https://img001.prntscr.com/file/img001/on8dezkpS_m7q6GOkXxL6A.png

I hope my CSS can help to solve your problem

Best regards,

Daisy

[PKL]

Thank you, that is very helpful! One thing -- on mobile, the blocks are stacked so I don't want the vertical line -- how can I make it so the vertical line doesn't show when the blocks are stacked?

Thank you!

[DaisyVo · Accepted solution]

@PKL You can replace 

.multi-column > div:nth-child(1) > .prose.text-start {
    border-right: 3px solid;
    border-color: rgb(var(--border-color));
}

by this code to CSS on desktop

@media only screen and (min-width: 1200px) {
 .multi-column > div:nth-child(1) > .prose.text-start {
      border-right: 3px solid;
      border-color: rgb(var(--border-color));
  }
}