problems with responsive design spacing and icons in general

Home Forums Jevelin Theme problems with responsive design spacing and icons in general

Home Forums Jevelin Theme problems with responsive design spacing and icons in general

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    RESOLVED Posts
  • DominikFries77
    Participant

    <div class=””>Hi Guys!
    I have a 2 questions for you:</div>
    <div class=””>1. In the responsive design of the theme, is there a way to limit the space it shows between header and page body in a mobile device on default view (not horizontal/landscape – I mean vertical view like on an iPhone).

    See attached image below.

    2. Also, in the Portfolio Pages, there are Sharing Buttons. Unfortunately these Sharing Button Icons are not being displayed? Is there a way to fix that? The functionality is there there. Just the icons are not showing except for mail.

    Also attaching an image, if I may.</div>

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

    DominikFries77
    Participant

    Also, when I start using Icons in the Header Menu, I have an odd problem:
    For some reason the font changes from the themes default font “Montserrat” (cyrillic-ext) to Times New Roman. Not sure why that problem occurs. It doesn’t seem to make a difference if I use mega menus or regular menu navigation.

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

    Hi @DominikFries77,

     

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

     

    Could you please share the page URLs from your site where it is not displaying correctly so that I can troubleshoot it?

     

    Best regards,
    Shufflehound team

    DominikFries77
    Participant

    1. In the responsive design of the theme, is there a way to limit the space it shows between header and page body in a mobile device on default view (not horizontal/landscape – I mean vertical view like on an iPhone).

    You can remove that space 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

     

    header.primary-mobile {
        height: auto !important;
    }

     

    2. Also, in the Portfolio Pages, there are Sharing Buttons. Unfortunately these Sharing Button Icons are not being displayed? Is there a way to fix that? The functionality is there there. Just the icons are not showing except for mail.

    Please use below custom CSS code to resolve it.

     

    .jssocials-shares i.fa {
        font-family: 'simple-line-icons' !important;    
    }
    
    .sh-social-share-networks .fa-facebook:before {
        content: "\e00b" !important;
    }

     

    Also, when I start using Icons in the Header Menu, I have an odd problem:
    For some reason the font changes from the themes default font “Montserrat” (cyrillic-ext) to Times New Roman. Not sure why that problem occurs. It doesn’t seem to make a difference if I use mega menus or regular menu navigation.

    It displays fine for me as shown in the attached screenshot.

     

    Please test it clearing your browser cache or using a different browser.

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

    DominikFries77
    Participant

    Well, actually I fixed the area displayed in your screenshot. Try the external links part? There are still some issues visible.

     

    DominikFries77
    Participant

    Correction: The space on the responsive/mobile display was fixed with the custom CSS code provided above

    The social share buttons were also fixed, thank you!

    So the only remaining problem would be the shifting font on the header menu…

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

    So the only remaining problem would be the shifting font on the header menu…

    It displays “Montserrat” font for me as shown in the attached screenshot.

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

    DominikFries77
    Participant

    Unfortunately this problem is still not fixed. There are still different fonts even in your own screenshot you provided. 500px and Google Business / Facebook are not in the Monserrat font, seems more like Times New Roman to me.

    Please advise! Thanks!

    Solution for this topic

    Please try using the below custom CSS code to resolve the issue.

     

    .sh-nav-mobile li.menu-item-has-icon > a.fa {
        font-family: "Montserrat" !important;
    }

    DominikFries77
    Participant

    Hi!

    Ok, right now I have the following in the custom CSS code under appearence:

    header.primary-mobile {
    height: auto !important;
    }

    .jssocials-shares i.fa {
    font-family: ‘simple-line-icons’ !important;
    }

    .sh-social-share-networks .fa-facebook:before {
    content: “\e00b” !important;
    }
    .sh-nav-mobile li.menu-item-has-icon > a.fa {
    font-family: “Montserrat” !important;
    }

     

    Currently still see the issue…cleared cache as well. Hmm…mind boggling… It’s a rather small issue, but maybe we can get it fixed. 🙂

    I visited your website and it works fine for me as shown in the attached screenshot.

     

    Please test it clearing your browser cache or using a different browser.

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

    DominikFries77
    Participant

    Yes, perfect. The issue is now resolved. Thank you! Apparently cache was not “that” clear 🙂

    You are most welcome here 🙂

Viewing 14 posts - 1 through 14 (of 14 total)