Title text overlapping logo when viewed on Mobile - Cart Page

Site URL: http://www.stampdesignco.com

Hi,

I've tried lots of different CSS but can't work this one out... my title text on the Shopping Cart page is overlapping with my header/logo when viewed on Mobile. 

Does anyone know the code to push the text further down the page?

Thanks,

Emma

Edit this code in Custom CSS

.Mobile-bar.Mobile-bar--top {
    position: absolute;
    background: transparent !important;
    z-index: 999 !important;
    top: 0;
    left: 0;
    width: 100%;
    padding: 50px;
}

to this code

body:not(#cart) .Mobile-bar.Mobile-bar--top {
    position: absolute;
    background: transparent !important;
    z-index: 999 !important;
    top: 0;
    left: 0;
    width: 100%;
    padding: 50px;
}

Thanks so much!!! That worked 🙂

Do you also know how I can reduce the padding size between the 'Sample Pack' title and the image when on Mobile? And also move the 'Sample Pack' title down the page slightly? 

Add to Design > Custom CSS

/* Mobile Product Title */
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    line-height: 1.5em !important;
    margin-top: 50px !important;
}
}