Change size of Breadcrumb image on blog posts

Hello, I am having issues with my breadcrumb image on mobile devices and was wondering how to change the size of the breadcrumb image section in the middle of a blog post.
https://sebreechamber.com/hello-world/ is the page where I would like to resize the breadcrumb blog page. I have added the following code to the additional CSS section to change the image on the page, but changing the height to “80%” instead of 100 did not make the image or the breadcrumb section any smaller. Is there a different section of code I should be looking at?

@media only screen and (min-width: 320px) and (max-width: 480px) {
.ta-breadcrumb-section.blog-page-bread .overlay {
background: url(https://sebreechamber.com/wp-content/themes/financeup/images/breadcrumb/sebreemobile.jpg) repeat fixed !important;
height: 100%;
padding: 400px 0 80px 0;
position: relative;
width: 100%;
text-align: left;
}
}

The page I need help with: [log in to see the link]