[iamwithUParticipant]

Thanks Friech, for your tips and explanation, which helps me understand some basic stuff finally 🙂

[iamwithUParticipant]

Friech, I can’t tell you how grateful I am to be the beneficiary of your generous sharing and patient guidance.

Is it ever possible for me to be able to come back to you when I have other problems? It has been nerve-wrecking designing my own website without knowing html or css. Your journeying with me empowers me somewhat to do many basic things right.

[JadeModerator]

You’re most welcome and thank you for your kind words.

Yes, feel free to get in touch with us for any questions and we’ll gladly help you out. 🙂

[iamwithUParticipant]

Oops, apologies – I just found that my menu bar on my phone view is still on a grey patch. I think it’s called the mobile nav bar or ‘hamburger’. The background there is grey. Can tell me how to change that background to black, as what Friech did for me for my “Shop” page? This is linked to my question in #1416009 above.

[Rue NelModerator]

Hello There,

Thanks for updating in! To make sure that the mobile navbar has a black background color, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

a.x-btn-navbar.collapsed,
.masthead-inline .x-btn-navbar {
    background-color: #000 !important;
}

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

[iamwithUParticipant]

It works like magic – you’re a genius!

Thanks so much Rue Nel, for your prompt & helpful response.
Appreciate it 🙂

[Paul RModerator]

You’re most welcome! 🙂

[iamwithUParticipant]

Help needed!

I had changed my headlines font to niconne as taught by Friech earlier. Regretfully, I went to activate Woocommerce’s Storefront thinking it was just an extension and not realising it was a Theme. I then deleted Storefront and activated X Theme again.

The menu bars were topsy turvy but I managed to restore that manually. However, the headlines took on the old font. I checked the class and the X Child Theme style.css – the niconne is there as before. How do I make my headlines appear in the niconne font again?

I had cleared my history in Safari and waited for some time, but the niconne font still does not show up.

[JoaoModerator]

Hi There,

Add the class niconne to your custom headline element and add the following code to style.css or to Appereance Customizer Custom CSS

.niconne {
	font-family: 'Niconne', cursive !important;
	font-size: 32px;
}

Hope it helps

Joao

[iamwithUParticipant]

Fantastic. It works when I added your code in the Customiser. Tks Joao.

Just for learning purpose, I already had Friech’s code in the Child style.css:
.niconne {
font-family: ‘Niconne’, cursive !important;
}

Why is it that it did not work then?.

Also you specified 32px. I had previously in Cornerstone “style” placed as 40px. should I remove that? Which one takes priority or become operative?

I like the Heading to be 40px on my laptop. But on the phone, it becomes too big. How do I select 40px for my laptop, but 32px for my phone?

[iamwithUParticipant]

Oh no… I notice that the headline font on the laptop is now correct, but the font for the headlines on the iPad and iPhone is a different font. Very odd!

[iamwithUParticipant]

To add to the mystery above (of different font for mobile devices), now one of the headlines in my “About” page are partly hidden. Please see screenshot – the bottom parts of certain alphabets are now cut off.

Attachments:

You must be logged in to view attached files.

[RadModerator]

Hi there,

Yes, you should remove that other CSS if they are intended to be moved or replaced. What device you’re testing it with? Tried with iOS devices and the headings is not cut, but yes I can replicate on simulation. Please add bottom padding to the section row where the text is being cut.

And in your screenshot, is it the correct one or the wrong one?

Thanks!

[iamwithUParticipant]

That screen shot in my last reply has the correct font. It is from my laptop.

But if you look at the same wording on my iPad /iPhones, the font is wrong – please see screen shot here. (You will notice the bottom part of the heading is cut off as well.)

Could you please help me restore my heading of these 2 pages to niconne? Why does the font appear differently on different devices?

Attachments:

You must be logged in to view attached files.

[iamwithUParticipant]

Also I had asked earlier: how do I specify font 40px for desktop view, but 34px for mobile phone views?

Should Joao’s CSS above exclude the font size?
Appreciate your advice.

[Author]

Posts