Mobile Site Header Padding is too large

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

The Padding on my site header on desktop is perfect but on mobile appears very large thus pushing some of my content out of the frame. Is there a way to change this so it looks normal on mobile and does not affect the desktop version? Maybe adjusting the size of the font only on my homepage and only on mobile? Is this possible?

Add to Design > Custom CSS

/* Mobile portfolio padding */
@media screen and (max-width:767px) {
.portfolio-hover-items {
    padding-top: 0 !important;
}
}

This is almost perfect! 

There is still content cut off at the bottom of my mobile site. Is there a way to make the font for the titles to be smaller but ONLY on mobile?

On 1/13/2021 at 10:32 PM, JustinSinger said:

This is almost perfect! 

There is still content cut off at the bottom of my mobile site. Is there a way to make the font for the titles to be smaller but ONLY on mobile?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
span.portfolio-hover-item-content {
    font-size: 16px !important;
}
}

Thank you so much!