Space between bulletpoints is not even on mobile

Site URL: https://curranz.squarespace.com/

Hi there,

I've noticed a strange behaviour when trying to view bulletpoints on mobile - seems like the amount of text as an impact and although on desktop it all looks good, on mobile vertical spaces seem uneven.

Here are the screenshots attached:

View on the desktop:

And view on the mobile (or tablet):

Is there a a way to display them even all all medias?

Can you share access password?

Sure, sir - the password is 'berries'

On 8/7/2020 at 3:17 PM, tuanphan said:

Can you share access password?

Hi @tuanphan, hope you are well. Did you have any luck with looking into this for me? 
The password is 'berries' 

Thank you very much so far and fingers crossed your magic with CSS will help us again 🙂

They are in 2 lists, so they have different spacing.

The simplest way is add one more list for mobile, then I will give the code to hide this on desktop, show on mobile only

1 hour ago, tuanphan said:

They are in 2 lists, so they have different spacing.

The simplest way is add one more list for mobile, then I will give the code to hide this on desktop, show on mobile only

Great, thank you @tuanphan - amazing as always! Sorry for a potentially daft question - do I replicate entire section for that purpose, or simply duplicate the list with bullet points?

Eugene

19 minutes ago, eugenesoch said:

Great, thank you @tuanphan - amazing as always! Sorry for a potentially daft question - do I replicate entire section for that purpose, or simply duplicate the list with bullet points?

Eugene

just duplicate the list

1 hour ago, tuanphan said:

just duplicate the list

Hi @tuanphan,

All done for you. 

2 hours ago, eugenesoch said:

Hi @tuanphan,

 

All done for you. 

I don't see new list..

On 8/17/2020 at 3:48 PM, tuanphan said:

I don't see new list..

Hi @tuanphan, sorry for confusion. As per original request, I duplicated the list on the health page: https://curranz.squarespace.com/for-health

Hi @tuanphan, any luck with those bulletpoints?

It lives on the https://curranz.squarespace.com/for-health

The screenshot is below.

Many thanks!

which list you want to hide on desktop - mobile?

@tuanphan, either - it doesn't really matter, as they are both the same.

Hi @tuanphan, so sorry about that - we have now extended the trial again - if you please could have a look at this, it would be great. 

HI @tuanphan Hope you're well. Would you please be kind and have another look into this  for me? Many thanks!

Add to Home > Design > Custom CSS

/* Hide list 2 on desktop */
/* dont work in Edit Mode */
@media screen and (min-width:992px) {
body:not(.sqs-edit-mode-active) div#block-yui_3_17_2_1_1597667163838_15473 {
    display: none;
}
}
/* Hide list 1 on mobile */
/* dont work in Edit Mode */
@media screen and (max-width:767px) {
body:not(.sqs-edit-mode-active) div#block-084bccd74bd18615510b {
    display: none;
}
}

19 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Hide list 2 on desktop */
/* dont work in Edit Mode */
@media screen and (min-width:992px) {
body:not(.sqs-edit-mode-active) div#block-yui_3_17_2_1_1597667163838_15473 {
    display: none;
}
}
/* Hide list 1 on mobile */
/* dont work in Edit Mode */
@media screen and (max-width:767px) {
body:not(.sqs-edit-mode-active) div#block-084bccd74bd18615510b {
    display: none;
}
}

 

@tuanphan thank you for this, sadly this does not resolve the initial issue with uneven spaces between the paragraphs.. 😞

On 8/17/2020 at 3:10 PM, tuanphan said:

They are in 2 lists, so they have different spacing.

The simplest way is add one more list for mobile, then I will give the code to hide this on desktop, show on mobile only