Need logo larger, centered, and responsive on mobile
Hello, I have done a lot of trial and error with the CSS to get the logo centered and sized how I want it on a computer screen, but it is not responsive for mobile. Is there a better way I should do this? How do I get it to work for mobile?
/*SPACE ABOVE & BELOW LOGO*/
.site-header-main {
padding-top:25px;
padding-bottom: 90px;
margin-top:0px;
margin-bottom: 0px;
}
/*LOGO SIZE*/
.custom-logo {
margin:0px auto;
max-width:684px;
height: 80px;
}
.site-branding {
position: absolute;
height: 100px;
left:29%;
transform:translateX(-50%);
}