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

Consistent height for list items (row of boxes w text)


Recommended Posts

Site URL: https://www.mackenziearchitects.com

Hello! Wondering if there's any way to make list items a consistent height (see image below).  

Grey boxes with text sometimes are all one height,  sometimes not, depending on the screensize. This can make the design look wonky. 

I understand that part of this is bc the template is responsive - which is awesome - but curious if there's still any way to encourage a baseline height consistency...?

Thanks for any tips. 

M_A_C_K_E_N_Z_I_E___A_R_C_H_I_T_E_C_T_S_-_Senior_Living___Multifamily.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

On 8/26/2021 at 8:42 PM, Mirabile said:

Site URL: https://www.mackenziearchitects.com

Hello! Wondering if there's any way to make list items a consistent height (see image below).  

Grey boxes with text sometimes are all one height,  sometimes not, depending on the screensize. This can make the design look wonky. 

I understand that part of this is bc the template is responsive - which is awesome - but curious if there's still any way to encourage a baseline height consistency...?

Thanks for any tips. 

M_A_C_K_E_N_Z_I_E___A_R_C_H_I_T_E_C_T_S_-_Senior_Living___Multifamily.png

Add to Design > Custom CSS

/* equal list items height */
body.homepage .list-item-content {
    min-height: 290px;
}

@BlayneG87 Can you share link to your site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 8/30/2021 at 6:14 AM, BlayneG87 said:

@tuanphan It's https://bigkidbakesale.squarespace.com/  Password: bigkidbakesale

 

Thanks!

Hi,

Where is list section? I don't see it on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
5 hours ago, BlayneG87 said:

@tuanphan Hi, it is on the Shop page.

Add to Shop Page Header (To open Shop Page Header > Hover Shop on Pages > Main Navigation > Click Gear Icon > Advanced)

<style>
  /*
  - This code will set min height for all elements
  - Depend the title/text, you can adjust these values
  */
  @media screen and (min-width:992px) {
  	/* list title */
    h2.list-item-content__title {
    min-height: 100px;
}
    /* list text */
    .list-item-content__description {
    min-height: 100px;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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