Jump to content

Padding on markdown blocks when going over two lines on mobile

Recommended Posts

Site URL: https://www.boutique14.co.uk/home1

Hi,

 

Bit of a tricky one (for me). On this page: https://www.boutique14.co.uk/home1 I have three markdown boxes underneath images. On desktop they look fine (see attached image). They are the ones with a pink background saying "Personal Service";  "Custom Samples"; "Matching Stationery".

 

However, on a screen size where the text goes over onto two lines the markdown box obviously changes shape to accommodate. This can be on any device, but a good example is on mobile in landscape (see second attached image). This throws out the visuals on this section of the page and looks messy.

 

Is there some way I can CSS it so that if one box goes over onto two lines then they all do? 

 

Thanks.

 

Desktop.JPG

IMG_0546.PNG

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can set same height for 3 boxes, add to Home > design > Custom CSS

body#collection-5e94620e3f49493c11943980 .markdown-block {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
}

 

Edited by tuanphan

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.