If you are unable to do it from theme options,here is a quick fix:
Just write a media query @media screen and (max-width:….) and redefine the logo size in your child theme style.css
use !important with your new size so that it takes precedence over theme settings.
I’m not sure which coding relates to my site logo. I have tried adding:
@media screen and (max-width: 600px) {
and then different versions of what I have read on other forums to my CSS Style Editor Sheet which comes with Jetpack, but nothing seems to work.
Should the number be a size in px or should it be a %?
Please see below for the coding under the section called Responsive on my actual theme stylesheet (and starts with @media screen…) Any advice would be much appreciated:
}
.site-logo-link,
.site-title {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: block;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: 30px;
margin-bottom: 30px;
min-height: 60px;
}
.site-logo-link + .site-title {
margin-top: -20px;
min-height: 0;
}
.site-description {
margin-top: -20px;
margin-bottom: 30px;
}
.site-logo {
margin: 0;
max-height: 120px;
}
.site-description,
.site-title {
text-align: left;
}
.widget-area:before {
margin-top: -32px;
Hi,
Don’t worry, I have solved it!! Thank you!
