Product title letters overlapping, especially on mobile

Site URL: http://thebrickhaus.com/

Hi guys, I've been having a bit of trouble with the product titles overlapping each other. It happens on some PC's, but especially on mobile and iPad OS. Any help or suggestions would be appreciated. Also, not sure if I can lump it into the same thread but does anyone know a way I can make my footer less spaced apart on mobile.

Hi. What is access password?

11 hours ago, tuanphan said:

Hi. What is access password?

Site made temporarily public. Thanks.

11 hours ago, thecurator said:

Site made temporarily public. Thanks.

Q1. You need to adjust line height of heading 1 in Site Styles

Or add this to Design > Custom CSS

@media screen and (max-width:640px) {
h1.ProductItem-details-title {
    line-height: 50px !Important;
}
h1.ProductList-title {
    line-height: 20px !Important;
}
}

12 hours ago, tuanphan said:

Q1. You need to adjust line height of heading 1 in Site Styles

Or add this to Design > Custom CSS

@media screen and (max-width:640px) {
h1.ProductItem-details-title {
    line-height: 50px !Important;
}
h1.ProductList-title {
    line-height: 20px !Important;
}
}

 

Thank you so much. That seems to have done the trick. Do you happen to have any suggestions on how I can fix the spacing in the footer on mobile? Like in the third picture above.

11 hours ago, thecurator said:

Thank you so much. That seems to have done the trick. Do you happen to have any suggestions on how I can fix the spacing in the footer on mobile? Like in the third picture above.

Hi. You mean reduce spacing?

12 hours ago, tuanphan said:

Hi. You mean reduce spacing?

Yes

5 hours ago, thecurator said:

Yes

Hi. Your site has password protected

5 hours ago, tuanphan said:

Hi. Your site has password protected

Fixed. Sorry

On 8/18/2021 at 1:36 PM, thecurator said:

Fixed. Sorry

Hi. Add to Design > Custom CSS

/* footer spacing */
@media screen and (max-width:640px) {
nav.Footer-nav {
    line-height: 2em;
}
}