Logo size small mobile display - Support | Kriesi.at

Tagged: header, logo, mobile

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
April 25, 2020 at 12:50 pm #1207051
chrisboe
Participant
Hi,

I have a problem with my logo for mobile. I am using a different logo for mobile with this snippet:
```
<?php
add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() )
    {
    $logo = "https://des-zentrum.ch/wp-content/uploads/2020/03/logo_mobile.png";
    }
    return $logo;
}
```
But the logo has the same size as the slider on Iphone SE for example. Is there a possibilty to scale it automatically, or could you tell me how I can achieve this with a if/else for the resolution within the snippet? Unfortunately, its a copied snippet and I don´t know, how I can change it.

Thank you and best regards,
Chris
April 25, 2020 at 9:53 pm #1207107
Mike
Moderator
Hey chrisboe,
To adjust the logo please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (max-width: 325px) { 
	.responsive #wrap_all .logo img {
    width: 50%;
	}
	.responsive #top #wrap_all #header_main .logo {
        height: 35px !important;
	}
}
@media only screen and (min-width: 326px) and (max-width: 430px) { 
	.responsive #wrap_all .logo img {
    width: 80%;
	}
	.responsive #top #wrap_all #header_main .logo {
        height: 75px !important;
	}
}
```
this adjusts the logo for two phone sizes, small 325px, and large 430px, each has a width percentage you can adjust.

Best regards,
Mike
April 26, 2020 at 11:19 am #1207205

chrisboe
Participant

Hi Mike,

thank you for the answer. Is there a possibilty to use another Logo Image? Or how can I add an URL for a Logo?

br,
Chris

April 26, 2020 at 11:56 am #1207224
chrisboe
Participant
I´ve solved it.
```
@media only screen and (max-width: 325px) { 
	.responsive #wrap_all .logo img {
    width: 50%;
    content: url("https://des-zentrum.ch/wp-content/uploads/2020/03/logo_mobile.png");
    
    }
	.responsive #top #wrap_all #header_main .logo {
        height: 30px !important;
	}
}
@media only screen and (min-width: 326px) and (max-width: 736px) { 
	.responsive #wrap_all .logo img {
    width: 70%;
    content: url("https://des-zentrum.ch/wp-content/uploads/2020/03/logo_mobile.png");
	}
	.responsive #top #wrap_all #header_main .logo {
        height: 70px !important;
	}
}
```
April 26, 2020 at 2:52 pm #1207265

Mike
Moderator

Hi,
Glad to hear this is sorted out now, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Logo size small mobile display’ is closed to new replies.