Website logo blurred / pixelated on mobile.

Home › Forums › Jevelin Theme › Website logo blurred / pixelated on mobile.

Home › Forums › Jevelin Theme › Website logo blurred / pixelated on mobile.

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

  • CommandPost
    Participant

    Hi,

     

    My website logo looks fine on desktop, but when I open it on my smartphone, the logo looks pixelated.

     

    What can I do about this?

     

    2nd problem that you can see in the same screenshot is that the slider (I just have 1 image in it) font is incorrect. On desktop the font size stays the same, while the font weight is different for the words ‘personal,..’. On my smartphone the words with larger font weight are actually in lower font size.

     

    For future questions, would you rather have me consolidate multiple small questions into 1 thread or do you want 1 issue per thread?

     

    Thanks!

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @CommandPost,

     

    Thank you for your questions.

     

    My website logo looks fine on desktop, but when I open it on my smartphone, the logo looks pixelated.

    What can I do about this?

    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 .sh-header-mobile-navigation .header-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

#page-container .sh-header-mobile-navigation .header-logo {
    padding: 0;
}

     

    2nd problem that you can see in the same screenshot is that the slider (I just have 1 image in it) font is incorrect. On desktop the font size stays the same, while the font weight is different for the words ‘personal,..’. On my smartphone the words with larger font weight are actually in lower font size.

    Please ask slider related questions to the slider revolution support.

     

    For future questions, would you rather have me consolidate multiple small questions into 1 thread or do you want 1 issue per thread?

    If the questions are too small and related then you can ask maximum 2 questions in a single thread but do share your site URL and screenshots in each thread.

     

    Best regards,
    Shufflehound team

    CommandPost
    Participant

    Solution for this topic

    The css code didn’t help it. I missed a setting at the theme logo settings. Now I can put them on desktop and mobile on 30px height.

     

    Thank you for the input.

    • This reply was modified 4 years, 11 months ago by CommandPost.

    Shufflehound Support
    Moderator

    Awesome great to see you got that achieved.

     

    Please advise if you have more questions.

     

    Have a fantastic day!

    TheMakoBrothers
    Participant

    Hello,

     

    My logo (light color) looks very pixelated on desktop and mobile, I have tried as your suggestion above but it doesnt work for some reason:

    #page-container .sh-header-mobile-navigation .header-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

#page-container .sh-header-mobile-navigation .header-logo {
    padding: 0;
}

But still it looks very pixelated.

Please advise,

Thank you,
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)