How to decrease logo size? - Support | Kriesi.at

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

Author

Posts
August 15, 2018 at 2:19 am #997395

DimaP
Participant

Hi, Enfold Gurus,
I just went through some threads about the topic, but still didn’t get any solution myself. I have my logo that is put within the canvas of 340px x 156px, and within there the logo’s size is a bit decrease by ~ 25% proportionally, introducing some paddings from all the sizes. The issues is that when I upload my logo same size as 340px x 156px seems Enfold is scaling one up to that size, so it gonna be quite a big one, w/o top/bottom paddings, and a bit of blur.
So, my question is, how may I put my “smaller” logo centering one within the cell that was put, doing one a bit smaller, e.g. 25%, also make some top/bottom paddings of ~ 10px?

August 15, 2018 at 6:39 am #997445
Ismael
Moderator
Hey DimaP,

Thank you for using Enfold.

Did you select full size after uploading the logo? Please try not to create spaces around the image because you can css to add that space around the logo image.
```
.logo {
   padding: 10px;
}
```
Best regards,
Ismael
August 15, 2018 at 8:04 am #997458

DimaP
Participant

Hi, Ismael,
I just re-made my logo from the curves, now one size is 340px x 142px, and uploaded one as the full size. When I did that, my logo is started to look awesome, no scale, a bit of padding on top/bottom, same as my wish. But now, Enfold is re-scaled the logo again, blur is occurring… So, how to prevent Enfold from the logo’ re-scaling? Thank you.

August 16, 2018 at 5:09 am #997748

Ismael
Moderator

Hi,

It doesn’t look blurry on my end. It is being resized down to 196x90px because it has to adapt to the header height.

Screenshot: https://imgur.com/a/w5S4SsY

Best regards,
Ismael

August 16, 2018 at 6:26 am #997790
DimaP
Participant
This is almost weird as I cannot replicate the behavior myself. ) Please have a loot at both screenshots are taken insofar at Chrome & IE respectively – big ugly logo… ;) Your example is great, I’m looking for such a logo to be shown.
- This reply was modified 5 years, 9 months ago by DimaP.
August 16, 2018 at 1:44 pm #997935
Ismael
Moderator
Hi,

Thanks for the update. Try to use this css code to adjust the logo’s dimension on IE.
```
/*media all*/
.logo img {
    width: 198px;
    height: auto !important;
}

.header-scrolled .logo img {
    width: 99px;
}
```
`

Best regards,
Ismael
August 16, 2018 at 6:09 pm #998058

DimaP
Participant

Hi,
unfortunately looks similar, no change so far @ both IE and Chrome. ?

August 16, 2018 at 7:00 pm #998087

Jordan Shannon
Inactive Moderator

Hi,

Have you added his css to the very top of quick css so that it runs first? Also, be sure to clear the cache a few times over.

Best regards,
Jordan Shannon

August 16, 2018 at 7:21 pm #998092

DimaP
Participant

Hi, Jordan,
yes, the code was put on the very top of Quick CSS, also cash is cleaned through WP Rocket Admin & Ctrl-F5 a few times… ) You can check the website yourself, same size logo…

August 17, 2018 at 4:48 am #998240

Ismael
Moderator

Hi,

Thanks for the update. Please provide the login details in the private fields so that we can test it.

Best regards,
Ismael

August 17, 2018 at 6:20 am #998264
DimaP
Participant
Sure,…
- This reply was modified 5 years, 9 months ago by DimaP.
August 17, 2018 at 8:35 am #998319
Vinay
Inactive Moderator
Hi,

Thank you for sharing the credentials, I check your site but could not find any issue with the way the logo works.

Please clarify what exactly are you trying to achieve? and how we can reproduce the issue you are facing?

If you like the logo to appear in the same size as uploaded (selected size in media library) they try replacing the previous code with the below one.
```
/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    display: flex;
    flex-basis: auto;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
    
    z-index: 9;
}


/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}
```
Best regards,
Vinay
August 17, 2018 at 8:42 am #998324

DimaP
Participant

Hi, Vinay,

I put your code now! ) The Logo is started to appear as I expected (I also put padding: 10px; within the .logo class), but now I need to fix finally the Logo scrolling, as seems due to the padding, it scrolls down not so correct, you’ll see? Thanks for your suggestion.

August 17, 2018 at 5:11 pm #998514
Vinay
Inactive Moderator
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
/* CSS - Shrinking logo */

.responsive #top .header-scrolled .logo {
    padding-top:5px!important;
}

.responsive #top .header-scrolled .logo img {
    max-height: 35px!important;
}
```
Best regards,
Vinay
August 17, 2018 at 5:14 pm #998515

DimaP
Participant

Hi, Vinay,
sorry, suggested about the working, but then cleaned cache a bit of times, seems logo shrinking still doesn’t work. You can simply go to Admin to check and tune a bit yourself if possible.

August 17, 2018 at 5:41 pm #998529
DimaP
Participant
Hmmm… This is almost strange – in RU this work, but in EN (1:1 QuickCSS) doesn’t … 2-checking now…
- This reply was modified 5 years, 9 months ago by DimaP.
August 18, 2018 at 11:09 am #998676

Vinay
Inactive Moderator

Hi,

I have adjusted the padding the rest of the logo looks good on my end. Please review the site and let us know.

Best regards,
Vinay

August 30, 2018 at 5:33 am #1003354

DimaP
Participant

Hi, Vinay,
I just saw a small issue I need to fix please, so in between the initial (big) logo (max-height: 90px;) and the scrolled (small) logo (max-height: 37.13px;) we have the “interim” logo (max-height: 80px;) w/o the paddings … So, how I could change the (max-height: 80px;) for (max-height: 71px;) please as it look great.
The only code we put into Quicj CSS was:

/* Logo */
.responsive #top #header #header_main .inner-container .logo {
display: flex;
flex-basis: auto;
padding-top: 6px;
width: auto;

/* Define scalable min width of the Logo on small screens */
min-width: 106.85px;
/* Define scalable max width of the Logo on big screens */
/* Logo width: (auto | 100% | px ); Set auto to display the uploaded image size */
max-width: 187px;
z-index: 9;
}
/* Logo image size */
.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
width: auto;

/* Height specification is not required. It is proportional to the max width of the Logo */
height: auto;
align-items: center;
align-self: center;
justify-content: center;
}
/* CSS – Shrinking logo */
.responsive #top .header-scrolled .logo {
padding-top: 6px !important;
}
.responsive #top .header-scrolled .logo img {
max-height: 37.14px !important;
}

August 31, 2018 at 3:42 am #1003863
Ismael
Moderator
Hi,

Thanks for the update.

This should resize the logo according to the header height on scroll.
```
add_action('wp_footer', 'avia_scroll_resize_logo', 9999);
function avia_scroll_resize_logo() {
    ?>
    <script>
        (function($) {
            $(document).ready(function () {
                var logo = $('.logo a img');

                function avia_scroll_resize_logo()
                {
                    set_status = function()
                    {
                        var st = $(window).scrollTop();

                        if(st < 100 && st < 79)
                        {
                            logo.css('height', logo.parents('#header_main').height() - 15);	
                        } else {
                            logo.css('height', '');
                        }
                    };

                    $(window).on( 'scroll',  function(){ window.requestAnimationFrame( set_status )} );
                    set_status();
                }

                avia_scroll_resize_logo();
            });
        })(jQuery);
    </script>
    <?php
}
```
Best regards,
Ismael
August 31, 2018 at 4:27 am #1003879

DimaP
Participant

Hi, Ismael,
should I try putting this into my functions.php?

August 31, 2018 at 11:56 am #1004040

Ismael
Moderator

Hi,

Yes, that should go in the functions.php file. :)

Best regards,
Ismael

August 31, 2018 at 12:37 pm #1004063

DimaP
Participant

Thanks, done, it was started shrinking much-much beautiful, anyway the final tune is to set the bottom padding / margin, as whilst you see the shrinked logo isn’t well positioned from the bottom…

September 1, 2018 at 12:52 pm #1004333
Vinay
Inactive Moderator
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
/* CSS - Logo Size */

#header.header-scrolled .logo img {
    max-height:35px!important;
}
```
Best regards,
Vinay
September 1, 2018 at 7:53 pm #1004456
DimaP
Participant
Hi, Vinay,
seems to be working Bud! Thank you!
- This reply was modified 5 years, 8 months ago by DimaP.
September 2, 2018 at 12:26 am #1004513

Vinay
Inactive Moderator

Hi,

Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Vinay
Author

Posts

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

The topic ‘How to decrease logo size?’ is closed to new replies.