Center and Shrink Logo for Mobile/Tablets

[devciccarelli]

Hi there!
Thanks for all of your help regarding my previous issues. I have launched the site Balaboutiquefl.com thanks to your team’s CSS coding. However, after I launched, I noticed that the logo does not shrink to adjust to a smaller screen and it sits off to the right.

Can you help me center the logo on mobile/tablet versions? I would also like to shrink it a bit. Thanks!!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 479px) {
#logo a:first-child{
margin-left:30% !important;
}

#logo a img{
width:auto !important;
}
}

@media only screen and (max-width: 1024px) {
#logo a:first-child{
margin-left:42% !important;
}

#logo a img{
width:auto !important;
}
}

Thanks
Mohammad

[devciccarelli]

Hi Mohammad,
Unfortunately, this custom CSS did not solve the issue. It actually moved the logo over to the right and stretched it vertically. Can you assist? I am attaching a screenshot of what happened.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I have resolved the issue so please check it now.
Thanks
Mohammad

[devciccarelli]

Hi Mohammed,
Thank you for centering the logo. Unfortunately, as the logo was centered, it lost its integrity and is way too stretched vertically. Can you help me? My client does not like how the logo looks right now.

Thanks again for your help!

I have attached a screen shot.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please check it now after clear the cache.
Thanks
Mohammad

[David Martin – Support]

Hi,

You will need to change the min-height to auto:

#logo img {
  height: 250px;
  min-height: auto!important;
}

The height has to be relative to width to retain its quality.

Thanks.

[inator]

Here’s my approach in case you want to consider an alternative for the next release:

@media only screen and (max-width: 767px) {
    #logo a:first-child{
        padding-top: 20px !important;
    }

    #logo img {
        max-height: 52px !important; /* adjust accordingly */
    }
}

@media only screen and (max-width: 991px) {
    #logo a:first-child{
        width: 100%;
    }

    #logo img {
        margin-left: auto;
        margin-right: auto;
        width: auto !important;
    }

    #logo a.mobile-menu-show {
        position: fixed;
        top: 5px;
        right: 5px;
    }
}

Please let me know if you see any flaws. Thanks!

[David Martin – Support]

Hi,

Great stuff, that looks good for me on all screen sizes and it works nicely with your logo setup.

Thanks for getting back to us,
David.