Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Change Logo on Mobile Device
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Change Logo on Mobile Device
- This topic has 21 replies, 6 voices, and was last updated 8 years by Kyle – SUPPORT.
-
Posted in: Neighborhood
-
July 2, 2015 at 4:53 pm #191184
Hi there!
Our Company is using a broad Logo wich is getting very small on mobile devices. Is there any possibility to change the Logo when the Screen is getting smaller?Thank you for your support!!
HolgerJuly 2, 2015 at 7:53 pm #191253Hi,
Yes, we can create a workaround with css.
Can you upload the desired logo for mobile and give us the full url that logo image?Thanks
-Rui
July 3, 2015 at 2:40 pm #191555Hi Rui!
Thanks for your fast reply! The Path is http://hochzeitskartendesign.com/wp-content/uploads/2015/07/HKD-Slogan-rot-weiss-smartphone.png
Will you set the image for smartphone or tablet devices? Is it also possible to position the Logo in center of the header?Thank you very much!
HolgerJuly 6, 2015 at 12:08 pm #191950Hi Holger,
Can you please provide your WordPress admin login details? (Mark it as private reply using option below)
July 6, 2015 at 1:00 pm #191985This reply has been marked as private.July 6, 2015 at 6:09 pm #192141Please use this custom CSS
@media only screen and (max-width: 479px) #logo a:first-child { max-width: 100% !important; width:100%; }
July 6, 2015 at 8:38 pm #192176Hi Nishtan!
I’ve inserter the code to my childtheme-style but nothing happens. i am also wondering how this code can be able to change the logo …
could you help me again?
thanks!July 8, 2015 at 11:51 am #192730Will forward this to Rui for you
– Kyle
July 8, 2015 at 12:03 pm #192738Hi,
Please use this logo:-@media only screen and (max-width: 767px) { #logo{ background:rgba(0, 0, 0, 0) url(" http://hochzeitskartendesign.com/wp-content/uploads/2015/07/HKD-Slogan-rot-weiss-smartphone.png") repeat scroll 0 0 !important; } #logo img{display:none !important;} }
Thanks
MohammadSeptember 24, 2015 at 10:37 am #216044Hi. I did the right thing and tried to find the answer to my problem, and I think this is the closest.
I need a different image on mobile devices, but I want to be able to specify a width for the image instead of resizing the actual image file, so that it can look good on different screen widths.
I’m using:
@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}But can’t get it to reduce to look right.
Thanks
September 24, 2015 at 10:42 am #216048Hi,
If you are using the code you pasted above, then it’s missing a closing bracket at the end.
Can you check this?-Rui
September 24, 2015 at 10:43 am #216049Oh yeah, I copied it wrong.
@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}#logo img{display:none !important;}
}September 24, 2015 at 10:48 am #216051Hi,
Is it working now?
Thanks
MohammadSeptember 24, 2015 at 11:03 am #216060Oh, no sorry I was unclear there.
I already had/have:
@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}#logo img{display:none !important;}
}but it needs something to make it fit right on the page.
The site is: hereboy.com.au
September 24, 2015 at 11:15 am #216064Hi,
Please remove last css code and use this new code:-
@media only screen and (max-width: 767px) {#logo{ height: 100px; width: auto !important; background: transparent url("//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png") no-repeat scroll 0px 0px / 100% !important; } #logo img{display:none !important;} } }
Thanks
Mohammad -
Posted in: Neighborhood
You must be logged in and have valid license to reply to this topic.