Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 11, 2022 at 11:12 am #1351341
    fkm

    Hi Enfold team,

    I’m using text instead of an image file as the logo on my website using the following codes:

    functions.php:

    `add_filter(‘avf_logo_final_output’, ‘avf_text_logo_final_output’);

    function avf_text_logo_final_output($logo) {
    $link = apply_filters(‘avf_logo_link’, home_url(‘/’));
    $logotext = “Florian K Mueller”;
    $subtext = “Büro für Kommunikation”;
    $subtext = “<span class=’subtext’>$subtext</span>”;
    $logo = “<span class=’logo’><body>“.$logotext.$subtext.”</body></span>”;

    return $logo;

    CSS:

    #top .logo,
    #top .logo a {
    overflow: visible;
    text-decoration: none !important;
    }

    #top .logo {
    width: 155px!important;
    font-weight: 600 !important;
    letter-spacing: 0.0em!important;
    display: flex;
    align-items: center;
    top: -20px;
    }

    #top .logo .subtext {
    font-size: 14px;
    font-weight: 400!important;
    color: #1a1a18;
    position: absolute;
    width: 100%;
    left: 0;
    top: 20px;
    }

    On small screens (smartphone: portrait/landscape) it looks like it should.
    But from a certain width, the subtext becomes double spaced (two lines) with a large line spacing.
    Please see screenshots and please let me know how to fix this.

    Thank you very much in advance.

    Best regards, fkm

    May 11, 2022 at 11:19 am #1351342
    fkm
    This reply has been marked as private.
    May 13, 2022 at 4:54 am #1351619
    Ismael

    Hi,

    Thank you for the inquiry.

    You may need to modify the style of the subtext element a bit.

    #top .logo .subtext {
    font-size: 14px;
    font-weight: 400!important;
    color: #1a1a18;
    position: relative;
    width: 100%;
    left: 0;
    top: -20px;
    display: block;
}

    We set the position of the subtext to relative and adjusted the value of the top position a bit.

    Best regards,
    Ismael

    May 30, 2022 at 11:55 am #1353447
    fkm

    Hi Ismael,

    thank you very much for your reply and please excuse my late one.

    And thank you very much for the CSS as well, it now works fine on larger screens.
    However, it also leads to a big line height between the title and the subtext in the mobile view (smartphones) – please see screenshot.

    Please let me know how to fix this.

    Thanks a lot in advance.

    Best regards,
    fkm

    May 31, 2022 at 8:22 am #1353536
    Ismael

    Hi,

    Thank you for the update.

    Did you remove the logo sub text? We are not seeing it anymore in the site.

    Regarding the mobile view gap, you may need to wrap the previous code inside a css media query so that it only affects the desktop view.

    Example:

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

    Place the css modification inside the css media query above.

    Best regards,
    Ismael

    May 31, 2022 at 9:55 am #1353558
    fkm

    Hi Ismael,

    you’re right, I spontaneously decided to remove the subtext and just wanted to inform you about it in this topic.
    You were faster. :)

    Nevertheless, thank you very much for your help. Now I know what to do if I´ll add a subtext again.

    However, for the view on the smartphone, I would like to place the logo a little higher.
    With the following CSS this works for larger views, but not for smaller ones like smartphones:

    #top .logo {
    width: 108px!important;
    font-weight: 600 !important;
    letter-spacing: 0.0em!important;
    display: flex;
    align-items: center;
    top: -20px!important;
    }

    Please let me know if there is a more efficient CSS for this matter or how to place the logo a little higher for smartphones.

    Thanks a lot in advance.

    Best regards,
    fkm

    June 1, 2022 at 1:49 am #1353642
    Nikko

    Hi fkm,

    Try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:767px) {
  .responsive #top .logo {
    position: relative;
  }

  .responsive #top .logo a {
    position: absolute;
    top: 10px;
  }
}

    Just change the top value as you see fit.

    Best regards,
    Nikko

    June 1, 2022 at 11:25 am #1353718
    fkm

    Hi Nikko,

    exactly like this, works fine – thank you very much.

    Best regards,
    fkm

    June 1, 2022 at 1:05 pm #1353738
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 1, 2022 at 1:08 pm #1353740
    fkm

    Hi Rikard,

    this topic can be closed. Thank you very much.

    Best regards,
    fkm

    June 1, 2022 at 8:01 pm #1353824
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘textlogo: subtext becomes douple spaced from a certain screen width’ is closed to new replies.