Hey!
Try with this code instead:
@media only screen and (max-width: 1139px) {
h4.iconlist_title { font-size: 13px ; }
}
Cheers!
Josue
Hi,
Our logo looks fine in the header on the main web layout, however distorts across all the other responsive layouts sizes.
Also, the ‘condensed category menu’ on the mobile phone layout, sits directly on top of our logo (however this problem may be resolved once the header re-sizing/ distortion issue is fixed)
Also, some of the category menus (the ones on the ends) and the search icon move down into the featured slider image section (on the homepage) and becomes barely visible. At the moment I have reduced the font sizes of the category menu to be small enough to avoid this occurring on the main layout size, but on an ipad held horizontally, you can see what I mean, as this exact same problem is still visible.
Thanks for your help.
Hi,
I have installed a premium wp plugin (post auto spinner, rewriter), after install my settings of H Tags except text-transform: none all of like font-weight, font-size etc. in custom.css don’t work now. I have deleted the plugin but nothing changed, now I have lost my settings, maybe my custom css don’t work completely.
I used Open Sans and added in function.php;
$fonts['Open Sans'] = 'Open+Sans:300,400,600,700,800&subset=latin,latin-ext';
and in custom css as font-weight: 300; now it seems like 600 or 800 so very bold.
Furthermore, if I use page builder (special heading) element, on mobile devices it is OK, but because I use body font 16px and for mobile devices 14px in custom.css, if I add via text editor any H Tag it appears on mobile devices like body text 14px.
How can I fix that? Thank you in advance!
Ps: Peter wenn du da bist kannst auch in Deutsch antworten, Danke!
Regards
Erdogan
Hey!
1) Use this code to change the style of the title:
.togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler {
font-family: 'Kreon', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.1em;
}
3) Try this code instead:
#top #wrap_all .main_color .toggler.activeTitle {
background-color: red;
color: blue;
}
Cheers!
Peter
Hi!
Try putting it as shortcode format:
[av_font_icon icon='ue821' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]
You can generate that using the Magic Wand tool.
Regards,
Josue
Hi!
I guess you are referring to the sub menu text, try using this code:
.sub-menu .avia-menu-text {
font-size: 16px;
color: black;
}
Regards,
Josue
Hi VBM!
If you have the debug field turned on for the drag and drop editor you could add this in to get a basic build of that page:
[av_fullscreen size='extra_large' animation='fade' autoplay='true' interval='7' scroll_down='aviaTBscroll_down']
[av_fullscreen_slide slide_type='image' id='2553' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='This is a page with transparent header' caption_pos='caption_left caption_left_framed caption_framed' link_apply='button' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Click me' button_color2='light' link2='http://' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay='']
Once the user scrolls down the header color will change
[/av_fullscreen_slide]
[av_fullscreen_slide slide_type='image' id='2552' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='Another caption' caption_pos='caption_right caption_right_framed caption_framed' link_apply='button button-two' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Learn more' button_color2='light' link2='#next-section' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pe.
[/av_fullscreen_slide]
[/av_fullscreen]
[av_one_fourth first]
[av_icon_box icon='59' position='left' title='Free Support']
Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa.
[/av_icon_box]
[/av_one_fourth]
[av_one_fourth]
[av_icon_box icon='2' position='left' title='Mobile Ready']
Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]
[av_one_fourth]
[av_icon_box icon='125' position='left' title='Updates']
Cum sociis natoque <strong>sadfsadfas </strong>Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]
[av_one_fourth]
[av_icon_box icon='36' position='left' title='SEO Optimized']
Aenean commodo ligula eget dolor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]
[av_section color='main_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/woman-flinging-long-hair-1500x1000.jpg' attachment='2576' attach='parallax' position='top left' repeat='no-repeat' video='' video_ratio='16:9' min_height='75' padding='default' shadow='no-shadow' id='']
[av_one_third first]
[av_icon_box icon='ue806' font='entypo-fontello' position='top' title='Mobile Ready' link='' linktarget='' linkelement='']
Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_third][av_one_third]
[av_icon_box icon='ue836' font='entypo-fontello' position='top' title='SEO Optimized' link='' linktarget='' linkelement='']
Aenean commodo ligula egconsectetueret dolor sit amlor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_third][av_one_third]
[av_icon_box icon='ue842' font='entypo-fontello' position='top' title='Free Support' link='' linktarget='' linkelement='']
Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa.
[/av_icon_box]
[/av_one_third]
[/av_section]
[av_section color='main_color' custom_bg='' src='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' video_mobile_disabled='' min_height='' padding='default' shadow='no-shadow' id='']
[av_one_fourth first]
[av_textblock]
<h6>Recent News</h6>
<em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em>
<a href="#">View more</a>
[/av_textblock]
[/av_one_fourth][av_three_fourth]
[av_postslider link='category,3' columns='3' items='3' contents='title' autoplay='no' interval='5']
[/av_three_fourth][av_hr class='default' height='50' position='center']
[av_one_fourth first]
[av_textblock]
<h6>Recent Work</h6>
<em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em>
<a href="#">View more</a>
[/av_textblock]
[/av_one_fourth][av_three_fourth]
[av_postslider link='portfolio_entries' columns='3' items='3' contents='title' autoplay='no' interval='5']
[/av_three_fourth]
[/av_section]
[av_section color='socket_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/photodune-3581207-black-in-black-m-1500x1182.jpg' attachment='2572' attach='parallax' position='top left' repeat='stretch' video='' video_ratio='16:9' min_height='75' padding='large' shadow='no-shadow' id='portfolio']
[av_heading heading='A beautiful <strong>experience!</strong>' tag='h1' color='custom-color-heading' custom_font='#ffffff' style='blockquote modern-quote modern-centered' size='50' subheading_active='subheading_below' subheading_size='18' padding='60']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_heading]
[av_one_fifth first]
[av_font_icon icon='ue826' font='entypo-fontello' style='border' caption='Eye Candy' link='manually,http://kriesi.at' linktarget='' color='#ffffff' size='40px' position='center']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
[/av_font_icon]
[/av_one_fifth][av_one_fifth]
[av_font_icon icon='ue856' font='entypo-fontello' style='border' caption='Tools' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
We have added exactly the tools you need and left out everything you don't need. Finally a multi purpose Theme that is not bloated!
[/av_font_icon]
[/av_one_fifth][av_one_fifth]
[av_font_icon icon='ue8a5' font='entypo-fontello' style='border' caption='A list' link='post,94' linktarget='' color='#ffffff' size='40px' position='center']
<ol>
<li>Super nice Parallax</li>
<li>Optimized for Speed</li>
<li>Brilliant Template Builder</li>
<li>Easy to use</li>
<li>Set up in 2 minutes</li>
</ol>
[/av_font_icon]
[/av_one_fifth][av_one_fifth]
[av_font_icon icon='ue8a8' font='entypo-fontello' style='border' caption='Updates' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
Enfold is an award winning theme that is quickly becoming one of themeforest top sellers. And for a reason! Try it yourself!
[/av_font_icon]
[/av_one_fifth][av_one_fifth]
[av_font_icon icon='ue8dd' font='entypo-fontello' style='border' caption='Rocket Science?' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
Far from! Probably the easiest Multipurpose theme you have ever used!
[/av_font_icon]
[/av_one_fifth]
[/av_section]
Best regards,
Devin
Hi again,
I have solved my issue, just added a section ID where I wanted to use fullwith contact form button. I have called the section as form and added the following css codes to custom.css;
#form input[type="submit"] {
border-radius: 5px !important;
padding: 9px 10px 7px !important;
font-size: 15px !important;
min-width: 100% !important;
}
Thanks
Erdogan
Hi
I trt to make a mega menu but it is not as with as te main menu and the font is verry big.
How can I fix the with and change the font size off the mega menu.
I am developing the site on my local machine. Please look at the screenshot what i meen.
WIth regards
Michel

Hi Manfred!
Thank you for using the Enfold theme.
You can use this:
font-size: 28px;
line-height: 1.1em;
margin-bottom: 10px;
background: #000;
filter: alpha(opacity = 80);
background: rgba(0, 0, 0, 0.5);
display: inline-block;
margin: 0 0 1px 0;
padding: 10px 15px;
text-transform: uppercase;
letter-spacing: 1px;
To make it easier, try learning about google inspector or firebug. You can then look for the appropriate style of a specific object.
Regards,
Ismael
Hey nini_bacher!
Thank you for using Enfold.
Maybe this will help:
@media only screen and (max-width: 1024px) {
h4.iconlist_title { font-size: 13px; }}
Cheers!
Ismael
How do I change the font size and color? I can change the font color in the title using what you provided, but how do I change the size of both title, and body of the tab, as well as the color.
Hi Peter!
I’d suggest refactoring your code to something like this:
<p align="center" class="first_text">Hav en:</p>
<p align="center" class="second_text">GOD DAG</p>
<p align="center"><img src="http://god-dag.dk/wp-content/uploads/2014/09/contact-symbol.png" width="151" height="205"></p>
<p align="center" class="third_text">T. +45 33 37 99 90 / M. (Email address hidden if logged out) </p>
<p align="center" class="fourth_text">God Dag Elleparken 3 2950 Trørød CVR nr. 30880412</p>
That way you can target each text individually via CSS and change them depending on the screen size with media queries:
.first_text{
font-size: 40px; color: red; font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif;
}
.second_text{
font-size: 30px;
}
.third_text{
font-size: 20px;
}
.fourth_text{
font-size: 10px;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.first_text{
font-size: 30px;
}
.second_text{
font-size: 20px;
}
.third_text{
font-size: 10px;
}
.fourth_text{
font-size: 10px;
}
}
Modify as needed.
Cheers!
Josue
Hello Support team,
I have a question that is connected to my earlier topic #318630.
The icon box titles have display problems when it comes to some browser window sizes.
This code:
@media only screen and (max-width: 480px) {
h4.iconlist_title { font-size: 12px; }}
led to a correct display on mobile phones.
But still, in between 785 px 1010px browser-window-width letters from the end of the titles are cut off.
I look forward to your response!
Hi,
I wanted to have fullwith contact form button and I have added this css code to custom css;
input[type="submit"] {
border-radius: 5px !important;
padding: 9px 10px 7px !important;
font-size: 15px !important;
min-width: 100% !important;
}
Now, the ajax search box on header (menu) after click input area is fullwith button :) I can’t add any text!
How can I change or fix that? So fullwith button (100%) only for contact form (below)…
Thank you very much in advance!
Regards
-
This topic was modified 11 years, 6 months ago by
fuenos.
Hi Nate!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
input#s {
font-size: 18px!important;
color: black!important;
}
Cheers!
Yigit
Hi charlie1!
1- Please add following code to Quick CSS in Enfold theme options under General Styling tab
.phone-info {
font-size: 18px;
color: red!important;
}
2- Please add following code to Functions.php file
function put_stuff_before_main_content() {
echo "<div class='my-class'><a href='http://kriesi.at'><img src='http://kriesi.at/wp-content/themes/kriesi/images/logo.png' /></a></div>";
}
add_action('ava_main_header', 'put_stuff_before_main_content');
and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust its position using
.my-class { position: relative; right: 10px; }
Regards,
Yigit
Hey guys,
a client’s “lovely” designer wants boxes to look like the attached picture which will go on the frontpage (the size of a third):-

Having scoured shortcodes I see the advice is to stay away from creating more shortcodes… so I added a code block with the following code:
<div class="shadow-orange" style="border: 3px solid #fe9763; color:#fe9763; padding:50px 30px 78px 30px;">
<span style="font-size:40px; font-weight:bold;">PRIVAT</span>
<p></p>
<p></p>
<p></p>
<div style="color:#fff; padding:50px 0px 100px 0px;">
<span style="font-size:20px; font-weight:bold; background-color:#BCBCB2;">RO OVERSKUD OG ØGET LYKKEFØLELSE</span>
</div>
<a class="avia-button avia-icon_select-no avia-color-custom avia-size-medium avia-position-right" style="background: none; color:#fe9763; font-size:23px;" href="http://www.god-dag.dk/foredrag/kurser-private">
<span class="avia_iconbox_title">LÆS MERE</span>
</a>
</div>
It worked but the text is not responsive! Could you advice me what I’ve done wrong??? LINK TO PAGE
Thank you very much for your help!
Problem solved when using standaard heading (H3) instead of specific size of letterfont. That’ll do for me…
Hi Ismael,
thank you for the reply:
-> we used the “Perfect Manual Masonry”, and the entries were tagged with “portrait” and “landscape”. That doesn´t work at all !!!
-> The size of the images in can see in the demo are 705 x 470 / 449 x 705 ???
-> The only things that works tolerably is the “Flexible Masonry”, but only with two columns. No idea how to set the options and image sizes to get a result like http://peacheyphotography.co.uk
-> However viewports with more than 1.140px width display the images wrong sized…
It would nice to have a documentation “how to use the masonry portfolio”!
Now the topic gets rather confused and achieves no results… so please let´s look back to the beginning of the topic:
We would like to display the portfolio like on this site: http://peacheyphotography.co.uk
-> How to set the images sizes is incomprehensible! please help us out, i think we are not the only participants with problems to use the masonry…
-> The overlay doesn´t really fit, are the no better options to do a colour-overlay?
-> The titel-/font-problem still exits…
Any solutions or not possibility to do like that?
Thanks, Christian
We would like to make the following changes to our Enfold site located here: http://23.235.201.84/pages/about-us/
1. We would like to increase the size of the font for the telephone number in the upper left corner and also change the color of the font. How can we do this?
2. In our current site (http://www.charleseliassalon.com/), there is an icon in the very top of the page (QuickGifts) which links to a different site. How can we add this image and link to the top area to the right of our telephone number?
Thank you very much,
Dan
Hi Josue,
it doesn´t work…neither i´m able to get the elements in the right sizes (now they are scaled up), nor the overlay fits exactly, nor the font is the front element and 100% visible…
Is there any chance to do it like the example above or your site http://kriesi.at/themes/enfold/shortcodes/masonry-gallery , but with a color-overlay with text?
Do you have another tutorial than this: http://vimeo.com/77433498, that declares how to get the masonry look like your site (which options, pictures sizes, etc.)?
Thanks, Christian
Hi!
Please add following code to Quick CSS as well
#footer { padding: 0; }
.footer_color .avia-slider-testimonials .avia-testimonial-content, .avia-slider-testimonials .avia-testimonial-arrow-wrap { background-color: #888; color: red; }
#footer strong.avia-testimonial-name { color: orange!important; }
#footer span.avia-testimonial-subtitle { color: blue !important; }
#footer .widgettitle { font-size: 20px; }
I did not understand this questions clearly “How do I change the line color for the box of the testimonial area?”. Please elaborate
Regards,
Yigit
Hi Yigit –
Thanks for this I’m still having some issues.
1. How do I decrease the padding on the top and bottom of the footer?
2. How do I change the background of the testimonial area?
3. How do I change the line color for the box of the testimonial area?
4. How do i change the font color of the testimonial area?
5. How do i change the font color of the persons name and position in testimonial area?
6. How do I increase the size of the column titles?
Website:
http://www.fertilizersusa.com/
-
This reply was modified 11 years, 6 months ago by
mcraig77.
Hi, I am just trying to add text to a color section. I have added a code block to the color section and added this code:
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 44px; color:#fff;">Hav en:</p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 90px; color:#fff;">GOD DAG</p>
<p align="center"><img src="http://god-dag.dk/wp-content/uploads/2014/09/contact-symbol.png" width="151" height="205"></p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 34px; color:#fff;">T. +45 33 37 99 90 / M. (Email address hidden if logged out) </p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 17px; color:#fff;">God Dag Elleparken 3 2950 Trørød CVR nr. 30880412</p>
Do I have to add something to make the text responsive. I can’t think of any other way to just get a simple section with a color background and text only :-(
LINK:See bottom of the frontpage: God-Dag.dk
-
This topic was modified 11 years, 6 months ago by
Netzie.
Hey mcraig77!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#footer .widgettitle { color: black; font-family: arial; }
#footer p, #footer a { font-size: 14px; }
#footer { max-height: 200px; }
#footer * { border-color: #628029!important; }
If that does not work, please post the link to your website
Regards,
Yigit
Thanks. it works. for font, size and color. How do I manage letterspacing in the menu fon?
Hi farrdesign79!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
a#scroll-top-link, a#scroll-top-link:hover {
background: transparent;
border: none;
font-size: 26px;
}
Regards,
Yigit
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) {
h4.iconlist_title { font-size: 12px; }}
Cheers!
Yigit
Hi there,
I made a couple of changes to the CSS of the Small Bar above the main menu and I’m having some issues.
I added the following under General Styling > Quick CSS:
.phone-info {
margin: auto !important;
font-weight: bold;
line-height: 40px;
font-size: 36px;
}
That looked great in the desktop browser but it was far too big on my mobile device. So, I borrowed the styling from this thread (https://kriesi.at/support/topic/responsive-logo-2/) and tried to apply it immediately AFTER the CSS I listed above. Here’s the Quick CSS I came up with for that:
@media only screen and (max-width: 767px) {
.phone-info {
margin: auto !important;
font-weight: bold;
line-height: 22px;
font-size: 16px;
}}
The problem I’m having is that while it now looks just like I want on my mobile device, the styling for the desktop has changed.
Under Advanced Styling > Small Bar above Main Menu, I made the following changes:
Font color – #FFFFFF
Background – #FF0000
Border – None
Now, when I reload the webpage in my desktop the text in the small bar above the main menu is no longer white, but gray. The background is not red, but white. However, in my mobile device, the background of the small bar is red and the text is white which is what I want.
So, my question is what is the Quick CSS I should be using that would allow me to style for mobile devices without affecting the styling of what I see in a desktop browser?
Thanks.
-
This topic was modified 11 years, 6 months ago by
Yigit.