Hey there James,
Hope you’re well! š
Where do you reside in Philippines? š by the way, I suggest you use a child theme http://codex.ww.wp.xz.cn/Child_Themes or use css custom plugin like this: https://ww.wp.xz.cn/plugins/simple-custom-css/ if you will customize your theme.
Add the codein your child theme’s style.css or using the plugin mentioned above.
#site-header img.logo {
max-width: 100%!important;
position: static;
max-height: auto;
}
This will simply override the default style that comes from the theme. Let me know what you think.
Looking forward for your reply! š
Take care,
Calvin
Thread Starter
jd1982
(@jd1982)
Hi Calvin,
Thanks for the swift reply – much appreciated!
I live on the island of Mindoro here.
I’ve added the custom CSS as you suggested but it doesn’t appear to have fixed the issue when viewing my site on a mobile device.
Have I missed something?
Thanks in advance,
James
Hi James,
Looks like we’ll have to hard code in the size for the logo at mobile widths. Here is the complete CSS you can use:
@media all and (max-width: 800px) {
#logo {
width: 240px !important;
position: static !important;
}
}
That will keep the logo 240px wide until the screen is 800px or wider. It’s not completely fluid, but it will keep the logo looking nice across devices.
Thread Starter
jd1982
(@jd1982)
Hi Ben,
Thanks for the quick reply.
Okay, I tried the CSS you suggested but it totally broke my site lol. Don’t ask me why or how, but after I added that CSS I couldn’t load my site at all. I’ve removed it again and the site is back online????
Oh I’m sorry that happened! I just re-tested the code and it’s working, so there must be something else related to the error.
Calvin suggested a plugin for adding the CSS, but there is a Custom CSS section included in the Customizer with Ignite. Did you use the input in the Customizer or the plugin for adding the CSS?
Hello guys,
Hope you guys are well! š
@jd1982
Before adding the code provided by Ben I suggest you remove the code I provided to avoid problem or different result. š
@ben
Sorry about that, next time I will recommend using the Custom CSS Section rather than the plugin when applicable. š
Best Regards,
Calvin
@calvin No worries, thanks for helping out š
Thread Starter
jd1982
(@jd1982)
Hi guys,
Okay, so I’ve added the code as you suggested Ben and it hasn’t broken my site this time. No idea what happened last time lol.
However, I have just viewed my site again on my smartphone and the logo is still the same i.e. cut off and not ‘responsive’ – any ideas?
Thanks in advance,
James
James,
I checked your site on a few browsers and I’m seeing the code implemented properly: http://cl.ly/image/2a331W0E070h.
This is good news. It means that the your site is likely just cached on your phone’s browser. You should be able to restart the browser or use a setting to clear the cache, and then it should display properly.
If this is not the case, please let me know the OS, browser, and browser version you’re using on your phone.
Thread Starter
jd1982
(@jd1982)
Hi Ben,
It’s now working on my phone too! Bizarre that when I checked after implementation earlier it wasn’t and that was after deleting cookies, clearing cache etc.
Anyway, thanks very much for your help š
You’re welcome, glad it’s working now š
