Jump to content

Space between bulletpoints is not even on mobile

Recommended Posts

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:

1438549832_Screenshot2020-08-07at15_03_53.thumb.png.51294e4b966d3505a4c97229155f9456.png

And view on the mobile (or tablet):

312572163_Screenshot2020-08-07at15_04_00.thumb.png.130b61e8e0e5790568f0729749d9c94f.png

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

Link to comment
  • Replies 18
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Website Expired
This account has expired. If you are the site owner, click below to login.
If you need to extend trial, you can contact SS Customer Care or contact me

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.. 😞

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.