Logo in Header Acting up on Mobile

The logo on my homepage displays well on desktop but on mobile it drops way down on the page and is really small. Is there a way to anchor the logo's position and size when viewed on a mobile device?

Here's the script I'm using:

header-title-logo a {
position: absolute;
bottom: -105px;
z-index: 9999;
}
/* Fix logo overlap */
.header-title-logo {
    width: 270px;
}
/* header shadow */
header#header {
box-shadow: 3px 4px 5px rgba(0,0,0,0.5);
}

Hi.

What is your site url? We can check easier

On 5/20/2022 at 5:07 PM, tuanphan said:

Hi.

What is your site url? We can check easier

https://cinnamon-arugula-lbx4.squarespace.com
 

yil1TONG4toft*ib

On 5/25/2022 at 2:51 AM, MattyT208 said:

https://cinnamon-arugula-lbx4.squarespace.com
 

yil1TONG4toft*ib

Don't remove any code in your current code. Add to Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo a {
    bottom: 0;
}
.header-title-logo img {
    max-height: 100px;
}}

That worked perfectly. Thank you!