Need help resizing logo for mobile screen

Home › Forums › Jevelin Theme › Need help resizing logo for mobile screen

Home › Forums › Jevelin Theme › Need help resizing logo for mobile screen

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    NOT RESOLVED Posts

  • randallrbaker
    Participant

    Good day, I’m having some issues resizing my logo toook big enough look big enough on a mobile browser. I was able to manually resize it so it looks nice on a desktop, but anytime I’m on my phone the logo looks so small I can bairly read what it says.

     

    I was able to install a plug-in that allows me to use an svg icon for the logo and it works well, I just need help making the logo big enough on both desktop screens and mobile screens.

     

    Thankyou in advance

    Randall

    Shufflehound Support
    Moderator

    Hi Randall,

     

    I hope you are well today and thank you for your question.

     

    Could you please share your site URL so that I can help you?

     

    Best regards,
    Shufflehound team

    randallrbaker
    Participant

    Login details are the same, but the website is earthmotivator.com

    randallrbaker
    Participant

    I also want to have the logo be consistent on the desktop version too because the logo shrinks when the nav bar shrinks.

    Shufflehound Support
    Moderator

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #page-container .header-logo img {
    width: 114px;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

    randallrbaker
    Participant

    Perfect it worked!!! Now is there a way to make the size specific on mobile? it looks way too big on my mobile screen.

    thanks in advance!

    randall

    randallrbaker
    Participant

    Basically I want the size to get a bit smaller on mobile so it doesn’t look so big.

     

    Shufflehound Support
    Moderator

    You can make it smaller on mobile using below CSS code.

     

    @media (max-width: 600px){
#page-container .header-logo img {
    width: 65px;
}
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)