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

Markdown box height & width


Icclebug

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
Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

if you use code to do this, edit your code to @media screen and (min-width:641px) { paste your code here }  

Posted Images

13 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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. 

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 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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
Link to post
  • 0

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

image.thumb.png.7b86aeded3d2a428360870d8270945ce.png

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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