Markdown box height & width

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. 

Can you share link to exact page? /config is url for site owner.

Of course, https://oarfish-salmon-gpgd.squarespace.com/fellows

Thank you 🙂 

Hi @tuanphan any thoughts on this please? 

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. 

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.

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. 

It is relatively complex. Will need to adjust all markdown code. I will check carefully later.

No worries and thank you. 

One quick question, if you look on this page: https://oarfish-salmon-gpgd.squarespace.com/alan-plumb

I want to add more white space above and below the image/text, as it's a little squashed on the desktop. If I do this, it creates huge amounts of white space on the mobile version. Is there a way to stop that at all? 

if you use code to do this, edit your code to

@media screen and (min-width:641px) {
paste your code here
}

Hi, thank you.

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

"add more white space above and below the image/text," how did you create this?

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. 

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;

}