My logo is not centered on mobile, but only on PC. I wrote to my theme support – no help. I tried implementing many custom css to my child theme customization additonal css code. Only one seems to do anything, but it only moves it to the right. I tried changing this value to the middle or center, but still nothing. This is the code which worked and moved it to the right, please help:
/* Change logo and menu position in tablets and mobile */
@media only screen and (max-width:767px) {
#advanced_menu_toggle {
left: 0!important;
right:auto!important;
}
.logo {
float: right!important;
width: auto!important;
}
}
Here is the source code of the logo area when I view it in FIREFOX in mobile responsive mode:
Let me know on this. Thanks!
]]>www.pbbrain.com
Based on another thread, I tried adding this CSS, but it just made the logo disappear completely (on mobile)
@media screen and (max-width: 480px) {
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img
.site-branding {
position: absolute;
}
{
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}
I uploaded a larger logo and increased the logo size in my CSS to match. Looks great on a desktop but displays a duplicate logo about half way down on the mobile version. Is there somewhere I need to update the logo size for mobile as well that might be causing this?
www.appmaking101.com
Thanks a ton,
Nick