Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Icclebug

Markdown box height & width

Question

Posted (edited)

hi everyone, 

I have a page with around 24 people profiles on it. The design is brilliant, kindly supplied by @tuanphan, I'm having problems with the font size and the height and width of the box.

I can change the font size so it looks perfect for the desktop, but it looks too small on the mobile version. Any ideas? 

Also, depending how much information is in each box determines how high the box is. As you can see, some boxes are deeper than others, is there a way of making them all the same height? 

Finally, is there a way of reducing the width of the boxes on the mobile version? 

https://oarfish-salmon-gpgd.squarespace.com/config/design

password: criminaljustice

Many thanks. 

 

Edited by Icclebug

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

Hey @tuanphan I managed to sort the font size and width of the boxes on the mobile version. The only thing I’m struggling with is making the boxes all the same height on the desktop. 

Share this post


Link to post
  • 0
1 hour ago, Icclebug said:

Hey @tuanphan I managed to sort the font size and width of the boxes on the mobile version. The only thing I’m struggling with is making the boxes all the same height on the desktop. 

You can duplicate your site & add me as a contributor, I will test some js code to equal height.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

Hi @tuanphan do i just add you as a contributor in permissions? Do i need your email? 

Can't duplicate site as it's in developer mode and it states I will lose all progress. 

Edited by Icclebug

Share this post


Link to post
  • 0

Hi, thank you.

Does the code go into the CSS or the markdown code and which code would i paste into it?

Share this post


Link to post
  • 0
Posted (edited)

There is padding above and below done in Design Styles, I’m thinking more space can be added with spacers but that then creates the issue on the mobile. 

Edited by Icclebug

Share this post


Link to post
  • 0

hi @tuanphan

See attached screenshots from desktop and mobile. 

You'll see on the desktop spacing seems ok above and below the image/text. On the mobile version, you'll see the red highlighted section at the top - not enough space in between the markdown block and the text block. The red highlighted section further down shows too much white space. 

The red highlighted sections on both the mobile and desktop shows too much line height in the footer. I've added this to the CSS but it doesn't reduce the line height enough. 

nav.Footer-nav {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}

desktop.png

mobile.jpg

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...