Docs

[nazeyr]

Hi!

Website: http://www.hakkaiza.no/
X-theme version: Version: 4.6.1
Cornerstone version: Version 1.3.0

Instead of creating several small topics, I melted all in one. Hope this is alright, I’m sorry if this is confusing and ruining the structure. Let me know!

Problem 1:
I have a problem hiding the logo in the middle of the menu on mobile devices.
On mobile devices you may find the logo on top of the menu, stacked form. But in the hamburger menu you’ll find a menu link called “Logo”. This is the menu element I wish to hide.

I’ve tried to add this code in the css:

@media (max-width: 480px){
  #menu-item-136{
      display: none !important;
  }
}

Doesn’t work. Is it because other css codes are overwriting it?
I’m stuck, please help!

Problem 2:
When I use “Enter” to create space or next line in a paragraph, it creates a huge gap now. See the menu text on the website. Why does this happened? Is it possible to change this, it also ruins the spacing under the Contact info, where the address is melted together with the opening days. I used class="resp-l man that I found, which reduces a little spacing. But doesn’t solve the whole issue..

Problem 3
When I try to post my homepage on Facebook or other pages, the URL won’t fetch any images from our website. I downloaded Yoast plugin, still no images even thought there is an override image there. I cannot find the file with header section either on FTP, to add additional images/info. How should I solve this case?

Thank you on beforehand!
Best regards

[Thai]

Hi There,

#1] Please try with this CSS instead:

@media (max-width: 979px){
  .mobile .menu-item-136{
      display: none !important;
  }
}

#2] Could you please provide us with some screenshots?

#3] Please insert your website URL on this link: https://developers.facebook.com/tools/debug/og/object/ then click on the Fetch new scrape information button.

Hope it helps 🙂

[nazeyr]

Hi!

Thank you for your fast reply!

Problem 1 and 3 fixed, thank you so much! Finally~ 😀

As in problem 2, see screenshots I have provided.
The first one shows one single “Enter” I did in the edit (see edit box to the left).
But if I press “Enter” again an extra double space will be added (see screenshot two after the first sentence).
And nothing special have been added in the code.. What should I do to fix this spacing problem for the entire website?

Have a pleasant day.
Best regards!

[Jade]

Hi there,

Please try to add <br /> code instead of just adding a white space through the enter key.

Hope this helps.

[nazeyr]

Hi!

Thanks for the tip. Unfortunately this didn’t help either. I have tried <br/> and <p>.
But as you can see on the screenshot I provided, it creates super distance space.

Where in the code may I change the line height in anyway?
Or is there another way to decrease the space between each sentence?

Thanks!
Best regards

[Rue Nel]

Hello There,

Thank you for the clarifications! To resolve this issue, simply add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-text p {
    line-height: 1.2;
}

We would loved to know if this has work for you. Thank you.

[nazeyr]

Hi!

Awesome! That worked, thanks a lot! 😀

Hm, but why does it behave differently when I use text boxes like in the screens I provided you?

I have not added any styles or padding to any of these text element nor column section either.
Have to use <p class="resp-l man"> on the whole text section to minimalize the space between each paragraph, really clumsy way.. Do you guys know the reason and how to adjust this?

Thanks again for your time guys!
Best regards

Edit PS. sorry, duplicated the attachments, can’t delete them..

[Rad]

This reply has been marked as private.

[nazeyr]

Hi again!

Thanks so much for the help!

Everything works as excepted! 😀
But there is one thing I noticed, the custom font I use is different on mobile devices. I have searched already in the forums about the same issue and tried out them, like e.g. this example code:

@font-face {
 font-family: "AlwaysTogether";
 src: url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.eot");
 src: url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.eot?#iefix") format("embedded-opentype"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.woff") format("woff"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.ttf") format("truetype"),
 url("http://boost.ee/wp-content/themes/x-child/fonts/fonts/alwaystogether.svg#fontname") format("svg");
}

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
 font-family: "alwaystogether";
}

My code is like this:

@font-face {
    font-family: 'Oregon LDO Book'; 
    src: url('http://www.hakkaiza.com/fonts/Oregon LDO Book.eot');
    src: url('http://www.hakkaiza.com/fonts/Oregon LDO Book.eot?#iefix') format('embedded-opentype'),
         url('http://www.hakkaiza.com/fonts/Oregon LDO Book.woff') format('woff'),
         url('http://www.hakkaiza.com/fonts/Oregon LDO Book.ttf') format('truetype'),
         url('http://www.hakkaiza.com/fonts/Oregon LDO Book.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

body .x-navbar .x-nav > .current-menu-item > a { 
font-family: "Oregon LDO Book", serif 
}

body { 
font-family: "Oregon LDO Book", serif 
}

header .x-brand.text {
    font-family: 'Oregon LDO Book', sans-serif;
}

.h-custom-headline{
font-family: 'Oregon LDO Book';
}

But it still doesn’t work..any ideas?
Sorry if I asked something that there is an answer to already!

Thank you again for your time and help as always! 🙂

BR

[Rad]

Hi there,

Try placing that on your child theme’s style.css and use !important. Example,

font-family: "Oregon LDO Book", serif !important;

@fon-face works if placed on the very top of other existing CSS. Customizer has pre-generated CSS hence, it’s placement isn’t topmost.

Thanks!

[nazeyr]

Hi again!

Ok, I added !important and moved @font-face to the top of the style.css in Customizer X-theme.
Downloaded child theme, the style.css from Customizer already had @font-face code.
So I tried to copy it to the code Editor > style.css page instead. See screenshots.

I have refreshed, cleared cache/log, tried incognito, but still the same here.. is it just me?
See screenshot from mobile. Tried inspecting the page too, but can’t find anything specific. So weird!!

Please help if it’s possible..Thanks again for your time guys!

BR

[Rue Nel]

Hello There,

Thank you for the very detailed update information. I have checked your css code and it appears that the filename of your font files has empty spaces in it. Please make sure that there are no space characters in a file. It will result to an error 404 and this may have been the caused of the issue. Please rename your font filename and update the css code;

@font-face {
    font-family: 'Oregon LDO Book'; 
    src: url('http://www.hakkaiza.com/fonts/Oregon-LDO-Book.eot');
    src: url('http://www.hakkaiza.com/fonts/Oregon-LDO-Book.eot?#iefix') format('embedded-opentype'),
         url('http://www.hakkaiza.com/fonts/Oregon-LDO-Book.woff') format('woff'),
         url('http://www.hakkaiza.com/fonts/Oregon-LDO-Book.ttf') format('truetype'),
         url('http://www.hakkaiza.com/fonts/Oregon-LDO-Book.svg#webfontitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

And by the way, please make sure that the font file is using the correct file location.

Hope this helps. Please let us know how it goes.

[Author]

Posts