Site logo in mobile is very big


I added below codes to make the logo bigger in size and it looks great in desktop version and IPAD also.

.site-logo {
max-width: 375px;

.site-branding {
padding: 10px 0px;

but my issue is: the logo is not resizing in mobile version, it is very big and makes the whole website scroll left and right.

is there any way that we can make the logo size smaller only in mobile version ?

P.s.; please view from your mobile phone and do not minimize the window width size on desktop, as you will see the issue only through mobile phones.




Use this please and let me know how it goes:

@media only screen and (max-width: 440px) {
	.site-logo {
		max-width: 100%;

Works excellent Vlad, Good job man.