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
<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>
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.
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
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.
Well, actually I fixed the area displayed in your screenshot. Try the external links part? There are still some issues visible.
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…
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.
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; }
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.
Yes, perfect. The issue is now resolved. Thank you! Apparently cache was not “that” clear 🙂
You are most welcome here 🙂