Hi Yigit, I managed to get the font working on my site with this CSS –

h1 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
h2 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
h3 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
h4 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
h5 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
h6 { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }
body { font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important; }

.special_amp {
font-weight: normal !important; font-family: ‘Century Gothic’, sans-serif !important; font-style: normal !important; font-size: 1em;
}

#socket {
font-weight: normal; font-family: ‘Century Gothic’, sans-serif !important;
}

However, it doesn’t work on my laptop, using the same browser as my Mac, Chrome. It also isn’t working on my mobile, in Chrome again.

Hope you can help
Matt

Hi
I removed the preformatted text. I pasted
.home #after_section_5 {
line-height: 2em;
font-size: 11px;
}
in the Quick CSS area.

While the text size is is reduced now, the text area container is still much wider than the footer bar.

How could i reduce the height of this area to be the same as that of the footer.

Thank you
Anurag

Hey Ismael, Thanks for your help. Put that in and it makes the icon blank. this is what I have in my quick css. I’m wondering if something I have in the code before it is messing things up.

@media only screen and (max-width: 767px) {
.av-inherit-size .av-special-heading-tag {
font-size: 0.5em !important;
}
}
#top .social_bookmarks li {
font-size: 22px;
}
.social_bookmarks_rss a::before {
content: ”;
‘\e800’ !important;
font-family: ‘fontello’;
}

Thanks for your help.

Hi: Thanks for your response. This has dragged on so you’ll need to read through the posts to get the situation.

I do not use image files for headlines, however I had to make the site live using a workaround of image, (rasterized,) headlines in the layer slider so they would be responsive on mobile, which headline text was not within LayerSlider. That is the problem.

Please see this page at http://swingcontrol.com/home2/ to understand the issue—view it at mobile size.

The headlines within LayerSlider need to be mobile responsive. They are getting lost, i.e. too big, on mobile. LayerSlider doesn’t use the same CSS as the Enfold overall theme, so Quick CSS doesn’t seem to affect it. All code placed within LayerSlider does not affect the responsiveness—I have tried all I could think of—and it doesn’t accept media queries.

This is the code I use in “Quick CSS” within Enfold Child which works fine on all Enfold controlled text to size the headlines:

@media only screen and (max-width: 640px) {
h3 {
font-size: 30px !important;
}
}

I would like to do the same thing within the individual slider layers, but nothing I try works. I have tried giving the layer an ID, #home3, but can’t seem to affect it. I have also scoured the forum and tried all solutions, but they do not work.

I have provided the temp admin login, and the password for the test page. I am turning this site, an interim one, into a large ecommerce site and will need to resolve this issue on both the interim site and the final site.

If you guys can help me resolve this I would be grateful.

Thanks.

Thanks for this, Ismael – nobody has told me this before!
Now I changed the font to a Google font, in the quicl .css, but no change. This is what I set up:

#top .subtext {
float:left;
font-size:32px;
font-weight:300;
color:#7f0afc;
position:relative;
font-family:”calligraffitti” !important;
}

Any idea why this doesn’t change anything on the mobile?
Any other code I should add?

Thanks a lot,
Susanne

I tried adding class and style to the widget text code, but nothing changed.

[av_button label='Get the Newsletter' link='page,1353' link_target='' size='large' position='left' icon_select='no' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' class='border-box-in-widget']

Hello Rikard,

thanks you for helping me!

I do have some more questions (additionally):
1. How can I insert a background image to the secondary menu in the top bar?
It should actually be the same as the header (wool-for-light-backround.png)
2. How can I change the font color and alternate hoover color of the secondary menu in the top bar?
The main menu font color should be different – in other words: it should be as it is right now.
3. Could you give me the height in px of the secondary menu top bar?
4. If recognized a misbehavior of the title of the icon box element (example: page prices)
I want to change the font color and font style of this title with the code:

h1, h2, h3, h4, h5, h6, tr.pricing-row td,  #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox {
font-family: Georgia; font-size: 18px; text-transform: none;
}

at the quick css field but it didn´t work out.
I have done a workaround of h3 in the “erweitertes styling” cockpit – but i´m sure that isn´t the best way.
Also I want to add other content fields e.g. the contact form attributes (to have the same font and font size there)
Can you give me a hint to do that?
5. I think I do not really understand the parallax navigation in the menu section. I have create it with “individual links” – but for me it seems the site is loading again instead of jumping to the #anker (e.g. page prices). How can I avoid to load the site again and scrolling directly to the #anker (usecase: the user is actually on the site “prices” and uses the submenu)?
6. I do not want and do not need the widget “Gravatar” – how can I remove it?
7. How could I use the enfold backgrounds for other avia layout elements e.g. the background of the “Reiter” element?

And last but not least the first question to point “forwarding”. Please find the credentials in the privat field.

Your theme support is really outstanding!

BR
Felix

hi there,

Sorry if i´m confusing ;-)

what I’m trying to reach you can see below in Priv. Section. a nearly 100% Logo centered.
Menu items with different hoover status and positioning under the related color area in logo.
Do you have any idea how to manage that?
I would greatly appreciate your help!

For now i have added to custom css:

/*Change Hamburger colors:*/
#advanced_menu_toggle, #advanced_menu_hide {
    background-color: #FFF;
    color: #545454;
    border-color: #393838;
}

/*Change dimensions of logo era:*/
#top .logo {
	width: 100%;
	height: 200;
        margin:-top:5px;
       }

/*Change  colors on hoover:*/
.link5:hover {
	background-color: #3E5D65;
}
.link4:hover {
	background-color: #6D8B31;
}
.link3:hover {
	background-color: #E69D2D;
}
.link2:hover {
	background-color: #D25A17;
}

/*give menu items constant width:*/
#menu-item-16594{
width: 190px !important;
}
#menu-item-16505{
width: 190px !important;
}
#menu-item-16506{
width: 190px !important;
}
#menu-item-16503{
width: 190px !important;
}
#menu-item-16507{
width: 190px !important;
}
/*add some space below menu:*/
.content{
padding-top:25px;
padding-bottom:25px;
}
#header_meta {
min-height: 40px;
}
/*styling  custom menu on pages:*/
.sub_menu {
font-size: 13px;
line-height: 30px;
position: relative;
top:20px;
}

best!

• This reply was modified 10 years, 9 months ago by wienerpresswerk.