Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 24, 2018 at 8:46 pm #946197
    vegaspro

    Just like the title says, what is the actual code to make the mobile logo bigger while keeping the logo on desktop as is?

    Our logo is 300×100

    When we view the site on mobile the logo shrinks down so small, it’s difficult to see.

    April 25, 2018 at 7:10 pm #946784
    vegaspro

    Any help here?

    April 25, 2018 at 7:50 pm #946810
    Guenni007

    it would be nice to see a link. Otherwise, it is purely speculative

    April 25, 2018 at 8:14 pm #946833
    vegaspro

    I did provide a private link for them to review. Regardless, we just need the code to make the logo larger.

    April 25, 2018 at 8:24 pm #946835
    Guenni007

    ok – than you had to wait til mods are here.

    April 26, 2018 at 1:45 am #946982
    Vinay

    Hi,

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

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height:140px;
}}

    Best regards,
    Vinay

    April 26, 2018 at 2:14 am #946990
    vegaspro

    That did not work, I even increased the max height and the logo does not display larger. Please send proper code to make the logo larger.

    April 26, 2018 at 6:03 pm #947376
    vegaspro

    Vinay?

    April 27, 2018 at 9:36 am #947747
    Vinay

    Hi,

    The height of the logo is adjusted proportionately to the width.

    I see the logo is much bigger in the mobile version now. You may not see the changes until the cached files are cleared in your browser.

    Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “ Empty Cache and Hard Reload” and review the site again.

    Also, if a caching plugin is installed please check the plugin settings and empty the cache.

    Best regards,
    Vinay

    April 27, 2018 at 6:42 pm #948088
    vegaspro
    This reply has been marked as private.
    April 29, 2018 at 9:31 am #948586
    Victoria

    Hi vegaspro,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  #av_section_1.avia-section-small .content {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #top #wrap_all  #av_section_1 .av-special-heading-tag {
      font-size: 18px;
  }
  #top #wrap_all .avia-button.avia-size-x-large {
      padding: 10px 22px 10px;
  }
  .responsive #top #av_section_1 .container .av-content-small {
    margin-bottom: 0;
  }
  #top #av_section_1 .flex_column.av_one_third.avia-builder-el-3.avia-builder-el-last,
  #top #av_section_1 .flex_column.av_two_third.avia-builder-el-1 {
    margin-bottom: 0px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 29, 2018 at 6:20 pm #948681
    vegaspro

    That did not work, it made it smaller

    April 30, 2018 at 4:46 pm #949116
    vegaspro

    Help!

    May 1, 2018 at 7:46 am #949411
    Ismael

    Hi,

    What do you see on your end? What device are you using? Please try this css code.

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
    height: 120px !important;
    width: 100%;
}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.