Jump to content

Markdown box height & width

Recommended Posts

Posted

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. 

 

  • Replies 13
  • Views 2.8k
  • Created
  • Last Reply
Posted
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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. 

Posted

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.