Custom CSS to control website look in mobile view Novo Template

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

Hello and thank you for your help in advance. I just need help with the look of my website in just a few areas when I preview it in mobile view and I am wondering if anyone has some custom CSS to control the following:

1. I can't seem to control the leading between my headers and subheads on some of my pages when they go to mobile view. I'll adjust them fine in desktop view, but then in mobile the leading will be way too large. Also, in one page, the header becomes "jumbled."

2. On two of my pages I have carousel galleries. All of the carousel options work great for desktop view but not for mobile. The carousel images will either be way too large to view or there will be extensive space between the carousel images and the other images on the page.

3. For some reason I can't get website support for my h4 on an iPhone. All the other fonts are supported, but the h4 font I chose would not show up on my Apple phone and I had to chose a websafe font (Arial).

Pictures are attached below. Thank you again for your help in these matters. Feel free to ask any more questions for clarification. Take care and be safe.

Q1. 2. Can you share link to these pages?

Q3. Squarespace font or custom font?

Hi, tuanphan and I'm sorry to respond late. These are the links to the two pages that I am having trouble with at this moment. I've solved everything in the meantime except the carousel problem I've discussed above (Q2). Any help would be appreciated- thank you!

https://www.meredithdipietrodesign.com/work-1/eventpackage

https://www.meredithdipietrodesign.com/work-1/dipietrodesigns

On 4/6/2021 at 11:13 AM, meredithdipietrodesign said:

Hi, tuanphan and I'm sorry to respond late. These are the links to the two pages that I am having trouble with at this moment. I've solved everything in the meantime except the carousel problem I've discussed above (Q2). Any help would be appreciated- thank you!

https://www.meredithdipietrodesign.com/work-1/eventpackage

https://www.meredithdipietrodesign.com/work-1/dipietrodesigns

Hi. Add this to Design > Custom CSS > Then save & reload your site

/* mobile slide */
@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 35vh !important;
}
}