I tried using two bars on this…I have the font size to 13px which is very small and the text for the title is still showing up on two lines in mobile view.
I understand dragging the container down in the layout section but on my home page the container containing the text for my site title…if I wanted to move that to the middle of the bar. How would I do this? I tried dragging the container on my page and it doesn’t work.
Hello There,
Thanks for updating in!
Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
I have temporarily deactivated your caching plugin so that we can see the changes right away.
1.) I have created a new font and applied it to your header. Please check out my screenshot.
2.) In smaller screen, please remove the margins and paddings of your text element. And also please keep track of the width of your text element. You might need to use a small font if you want only one line. The width of the text element (using font size 13px) is at least 280px which will always be a two lines of text because there is no longer enough space.
3.) If you want to move the contents of the container to the center, please play around with the Self Flex and Flex Layout position.
Hope this helps.
Ok so I know how to add Fonts to build the header…but the Font I was trying to add is the one below…It’s not showing up as a font to select…
3- Fonts - Loaded the fonts in this folder as suggesting in another post…/mezzalunasub3/wp-content/themes/pro/framework/fonts
and loaded it in the CSS as this…
@font-face {
font-family: ‘Ambroise’;
src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot’);
src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.woff’) format(‘woff’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.ttf’) format(‘truetype’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.svg’) format(‘svg’);
}
Hi there,
That’s not possible, it’s only added in CSS (styling) but it’s not directly added to the system/core fonts. Hence, you’ll have to use CSS to apply the font to the elements too.
Example,
h1 { font-family: 'Ambroise'; }
Thanks!
How do I apply it? I need to apply it in three places…
The headlines in this page…http://mezzalunabrewster3.cuisinehunter.com/menu/
and the site title and Menu on the main page…http://mezzalunabrewster3.cuisinehunter.com/
Hi there,
You can apply it the same way you added your @font-face CSS. Like adding it on your global custom CSS. Plus, it’s a sample, it may vary depending to which element you wish it applied and sometimes you’ll use !important if necessary. Example,
.x-btn {
font-family: 'Ambroise' !important;
}
Which elements should have this font?
Thanks!
I need to apply it to these three items
Hi there,
It should be like this,
h1.x-text-content-text-primary, .hm3.x-text, .hm5.x-menu > li > .x-anchor .x-anchor-text-primary, .hm11.x-menu > li > .x-anchor .x-anchor-text-primary {
font-family: 'Ambroise' !important;
}
I combined all the selectors for those elements since the styling needed to be applied is the same.
Thanks!
so add that to the global CSS? and it should change the fonts in those elements?
Hi there,
Yes, please add that CSS to your global custom CSS. And should change those element’s font, BUT, I noticed that your font URLs are wrong.
/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/
You should change them to
//mezzalunabrewster3.cuisinehunter.com/wp-content/themes/pro/framework/fonts/Ambroise/
Thanks!
Thank you…I made the changes as you suggested and it looks like the new font is loaded. Although i still see the old font on some of of the other view…like when looking at the mobile sites. How do I change that?
Also how can I change the fonts in the slider?
Hello There,
That is because only the text for desktop is added in the code. We need to update it and include the text for smaller screen. Please have the code updated and use this code:
h1.x-text-content-text-primary, .hm3.x-text,
.hm9.x-text,
.hm5.x-menu > li > .x-anchor .x-anchor-text-primary,
.hm11.x-menu > li > .x-anchor .x-anchor-text-primary,
.hm12.x-menu > li > .x-anchor .x-anchor-text-primary{
font-family: 'Ambroise' !important;
}
Hope this helps. Kindly let us know.
I just added the codes to the global CSS and it didnt change anything.
How do I make this page responsive in mobile view? http://mezzalunabrewster3.cuisinehunter.com/menu/
This is what the original looks like…http://www.amsterdamavenue.com/eat/ -if you notice both columns can be viewed in mobile and the heading shrink to fit.
Hi There,
You can achieve responsive text by applying the responsive text setting on your headline/text element.
Or the CSS approach that is explained here.
Hope it helps,
Cheers!
Hi There,
Does any of the 2 solutions provided address the responsive issue? Please let us know how it goes.
Cheers!
Okay so I choose option #1 because I didnt understand #2…but it doesnt seem to work. I gave the headline Appetizers a class like shown and tried to adjust it but it doesnt seem like its working. see screenshots.
Hi There,
When applying a CLASS on Headline or any element, do not append it with a period (it should be resp-text not .resp-text).
On the Responsive Text setting’s selector, yes you need to append it with a period (.resp-text)
Hope this helps,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.