Okay
  Public Ticket #1261908
Responsive Logo Size
Closed

Comments

  • Krissy started the conversation

    I want to make my site's logo to be responsive based off of the screen of the User. Right now the logo has height 110px on a desktop. I'd like it to be slightly larger but sometimes it will overlap the menu items on desktop. I don't want it to overlap the menu items. When it's viewed on mobile it becomes incredibly small, but I'd like it to fill 100% width of the header like the one in the footer. Can you give me the CSS code to make these changes possible?

    Attached files:  Screen Shot 2017-08-02 at 22.35.12.png
      nena-mobile-screen.jpg
      nena-mobile2.jpg

  •  112
    Anton replied

    Hi,

    try navigate to Visual Composer > Custom CSS tab and add these lines of code there:

    @media (max-width: 1196px) and (min-width: 1023px) {
    .site-title-custom img {
        max-height: 70px;
    } }

    Kind regards,

    MegaTheme

  • Krissy replied

    Hi Anton,

    No change whatsoever unfortunately, it's the exact same size when viewed on a mobile device.

  •  112
    Anton replied

    Add these lines of code for smaller screens:

    @media (max-width: 868px) {
    .site-title-custom img {
        max-height: 210px;
    }
    }

    Kind regards,

    MegaTheme

  • Krissy replied

    No change in anything. The Logo still overlaps the menu items on small computer screens and is the same small size on mobile devices.

  •  112
    Anton replied

    The logo looks bigger for me on a small screen size. Please see attached screenshot below:

    Kind regards,

    MegaTheme

  • Krissy replied

    Please see attached screenshot from two different smartphones. I can confirm it's the same case with at least one other phone (iPhone).

    Attached files:  nena-small-logo1.jpg
      nena-small-logo2.jpg

  •  112
    Anton replied

    Remove retina logo and use only your default logo, it should be ok.

    Kind regards,

    MegaThem

  • Krissy replied

    I've removed the retina logo and removed all settings for HiDPI logo in Appearance -> Theme Options.

    No change. The logo on smartphones is still tiny.

    Changing the values in your custom CSS produces no effect at all:

    @media (max-width: 868px) {
    .site-title-custom img {
        max-height: 210px;
    }
    }

    Is there some other container value controlling the size of the logo on smartphone screens?




  •  112
    Anton replied

    Hi, we apologize for the delay in response.

    Try 

    @media (max-width: 868px) {
    .site-title-custom img {
        max-height: 210px !important;
    }
    }

    Clear the browser cache https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

    Kind regards,

    MegaTheme

  • Krissy replied

    It looks like my site has caching issues for mobile. The changes took awhile to go through but it worked. Thanks for your help!