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)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form