Adjust leading of monospace font in mobile view

Dear Community,

Could anyone suggest how I can adjust, in the mobile view, the distance between the elements of the "Research" section (website: https://sandrabaernreuther.com)

To make it more legible and easier to click in the mobile view, I am trying to change the distance between the lines 

DIGITAL PRIMARY CARE 
HEALTH FINANCING 
REPRODUCTIVE MEDICINE
CHILDBIRTH

However, using line-height does not work as it changes the distance between all lines.

I made this section using Monospace. 

1 hour ago, ChhandakP said:

Dear Community,

Could anyone suggest how I can adjust, in the mobile view, the distance between the elements of the "Research" section (website: https://sandrabaernreuther.com)

To make it more legible and easier to click in the mobile view, I am trying to change the distance between the lines 

DIGITAL PRIMARY CARE 
HEALTH FINANCING 
REPRODUCTIVE MEDICINE
CHILDBIRTH

However, using line-height does not work as it changes the distance between all lines.

I made this section using Monospace. 

Hi @ChhandakP

i have just checked on my mobile (iPhone 14 Pro) and the layout displays as below. This spacing does not look too close (in my opinion) so have you managed to resolve? Or do you indeed want a bigger spacing between the lines?

L

@ChhandakP If you're referring to the space between the mobile menu links, you can try this code:

.header-menu-nav-item a {
  margin: 5vw 5vw;
}

The first 5vw (top and bottom link margin) is what I've changed from the current 3vw.

The second 5vw is the default setting for left and right margin.

6 hours ago, LouLouHarvey said:

Hi @ChhandakP

i have just checked on my mobile (iPhone 14 Pro) and the layout displays as below. This spacing does not look too close (in my opinion) so have you managed to resolve? Or do you indeed want a bigger spacing between the lines?

L

Thank you for your reply.
Sorry, I should have been more specific. I was not referring to the menu but to the Research section on the home page (as seen in the screenshot). On some screens (such as iPhone SE) when the texts (e.g. "Digital Primary Care") get broken, I want to introduce a bit more leading between the texts to make it understandable that they are separate headings).

I'm using the following code to reduce the font size on mobile screens— 

@media only screen and (max-width: 640px) {
 pre code {
    font-size: 2.3rem !important;
}
}

On 1/9/2024 at 2:03 PM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

/* Research section */
@media screen and (max-width:767px) {
div#block-e927e42e24c0be0fcbdc a {
    margin-bottom: 20px;
    display: inline-block;
}
}

 

Thanks !! It works 🙂