Hi!
You’d need to refactor your code in order to get it working as you want:
<ul class='icons_footer'>
<li>[av_font_icon icon='ue80a' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon]Eva Fredmüller</li>
<li>[av_font_icon icon='ue840' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon]Felleartig</li>
<li>[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon]Feldstr.1, 45559 Stadt</li>
<li>[av_font_icon icon='ue8ac' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon]0170 / 11 111 11</li>
<li>[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon] (Email address hidden if logged out) </li>
<li>[av_font_icon icon='ue8b1' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='14px' position='left'][/av_font_icon]felleartig.de</li>
</ul>
Then, add this to the Quick CSS:
.icons_footer li {
margin-bottom: 10px;
}
.icons_footer span{
margin-right: 6px;
min-width: 20px;
text-align: center;
}
Result:

Best regards,
Josue
Hey Jack!
Please add following code to Quick CSS as well
#top .fullsize .template-blog .post .entry-content-wrapper > * { font-size: 18px; }
Regards,
Yigit
Hello guys,
I have put the following code into the quick css
body {
font-size: 18px;
}
This is working fine on the pages: see here, but not on the blog posts: see here
What should I do to make all pages have the same sized body font?
Thanks in advance.
Jack.
Hi!
Thank you for using the theme!
You can add this on Quick CSS or custom.css:
.html_header_top.html_bottom_nav_header .main_menu ul:first-child>li a {
font-size: 16px;
}
Regarding the slider, You can add a layer then switch to HTML / Video / Audio. Add the text then position them to the right of the slider container.
Regards,
Ismael
Hey Dogmut!
Yes, please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
.iconbox_top .iconbox_icon { font-size: 26px; }
Cheers!
Yigit
Anonymous
This reply has been marked as private.
is it possible to increase the size of the fontello icon in the icon box. Many thanks
This reply has been marked as private.
Hey RobPhrase!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 990px) {
.template-page .entry-content-wrapper h2 {
font-size: 20px;
}
section.av_textblock_section > span {
float: left!important;
}}
Best regards,
Yigit
Hi Marssolutions!
Thank you for using the theme!
You can adjust the css and use media query to resize the button on mobile devices. Add this on Quick CSS or custom.css:
@media all and (max-width: 767px) {
.avia-button.avia-size-small {
padding: 4px 5px 5px;
font-size: 11px;
min-width: 70px;
}
}
Cheers!
Ismael
Hey Brian!
Please add
@media only screen and (max-width: 768px) and (min-width: 480px) {
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
color: white!important;
font-size: 14px!important;
}}
@media only screen and (max-width: 480px) {
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
color: white!important;
font-size: 11px!important;
}}
Cheers!
Yigit
Hi bdm55!
Please add following code to Quick CSS in Enfolld theme options under Styling tab and adjust as needed
.page-id-1122 p { font-size: 18px!important; }
and change the page ID’s to match your pages ID. You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg
Best regards,
Yigit
Hi jamesmac007!
You can add a class to your text, if its paragraph will go like so <p class"MY_CUSTOM_Class">.....</p> later on using custom css you can target that class and apply what’s needed.
//CSS code
.MY_CUSTOM_Class{
font-size: 22px //any size you want.
color: #888; //any hex color
line-height: 1 or in pixels 22px;
}
You could also assign an id to the section where you are inserting your content an be more specific.
Best regards,
David
-
This reply was modified 11 years, 11 months ago by
David.
Hi ..
Is there an easy way to change the body font size on a specific page and not the whole website?
Thanks,
Bill
Hello,
Please take a look at this page: http://dev.thecgschool.com/products/video-courses/vray-video-training-bundle/
I’ve added this CSS to get the correct sizing of the text I want:
#top h2, #top h1 strong {
color: #FFFFFF!important;
font-size: 45px!important;
}
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
color: white!important;
font-size: 24px!important;
}
However I’d like it to scale as the width decreases (for Smartphones / Tablets). Can you tell me what other code I need to add / adjust to make this happen? Thanks!
The buttons are working as intended but there is some hidden limitations you are running into. The large buttons have a minimum width of 127px so when the 1/5 column shrinks down the buttons inside are too big for the container and overlap.
Without the minimum width they would get too small and wrap but you can play with the values if you want:
.avia-button.avia-size-large {
padding: 15px 30px 13px;
font-size: 13px;
min-width: 127px;
}
Hi guys. I know you get these questions too often. I was searching in the forum, but found no clear solution of how to change a particular column’s or cell’s font or background. Hopefully you can simply refer to this post in the future, without having to write many custom answers:
I. Data Table Contents
1) How to change in one particular page (.page-ID-xxx):
in the second table (from top/from left) out of three tables in same page:
background color of:
a) row nr 3 and 6 from the top (full code here …… for this particular change only)
b) column nr 3 and 6 from the left (full code here …… for this particular change only)
c) single cell in row nr 5, column nr 5 (full code here …… for this particular change only)
2) in the second table (from top/from left) out of three tables in same page:
font color, weight, style, size and alignment of:
a) row nr 3 and 6 from the top (full code here …… for this particular change only)
b) column nr 3 and 6 from the left (full code here …… for this particular change only)
c) single cell in row nr 5, column nr 5 (full code here …… for this particular change only)
___________________________________________________
II. Pricing Table Contents
Exactly same question, but for Pricing tables instead of Data tables.
Thanks a lot guys for putting up with as newbies..
Hey HiDrew!
Thank you for using the suppor forum!
If you don’t mind, please post each questions on a single thread. It will be much easier for us to answer your queries in that manner.
1.) Please add this on Quick CSS or custom.css:
div.phone-info {
font-size: 20px;
top: 80px;
position: relative;
color: green !important;
}
2.) Use this for the menu borders:
.html_header_top.html_bottom_nav_header .main_menu ul:first-child>li a, .html_header_top.html_bottom_nav_header .main_menu ul:first-child>li:first-child a {
border: none;
}
3.) Use this to create a gap between the menu and the layer slider:
.home div#main {
margin-top: 50px;
}
4.) Can you please provide us a link to the page with the tables?
5.) Use this to align the testimonial name to the left:
.avia-testimonial-meta {
margin-left: 0;
}
Regards,
Ismael
Hi again !
I’m coming back because now I would like the logo title to be in font “lobster”, so I tried this in quick CSS :
#top .logo-title {
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-family: lobster;
font-size: 12px;
color: #000;
position: absolute;
left: 500px;
top: -7px;
opacity: 1;
white-space: nowrap;
}
but it didn’t work…
Could you please help me ?
I am using custom CSS to style fonts used in a Layerslider and to hide the text when viewed on mobiles. Since updating WP and the Enfold theme the text is not longer responding to this custom CSS:
Site: http://www.bhutantravelbureau.com (slider on homepage)
#top .avia-layerslider .ls-wp-container .ls-layer h1{
font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif!important;
font-size: 38px !important;
font-weight: bold !important;
letter-spacing: -2px;
line-height:32px;
}
#top .avia-layerslider .ls-wp-container .ls-layer h2{
font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif!important;
font-size: 26px !important;
letter-spacing: -1px;
font-weight: 400 !important;
line-height:24px;}
@media only screen and (max-width: 768px) {
#top .avia-layerslider .ls-wp-container .ls-layer h1{ display: none!important; }
#top .avia-layerslider .ls-wp-container .ls-layer h2{ display: none!important; }
Could you please advise if there has been a change that would be causing this? Thankyou.
My Mega Menu used to align to the left of the entire navigation bar, and since updating WP and the Enfold theme it now aligns to the parent tab causing one of the columns to move outside of the browser:
http://www.bhutantravelbureau.com (Tours & Treks tab)
I have looked at the new header options and cannot see anyway to correct this, and the removing the custom CSS that applies to the mega menu as below has no impact:
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
padding-left: 8px;
padding-right: 5px;
}
#top .header_color .main_menu .menu .avia_mega_div ul .current-menu-item > a {background-color: #e1e1e1;}
#header .avia_mega_div .units {
padding-left: 8px;
padding-right: 8px;
}
#top .main_menu .menu > li:last-child > a {padding-right: 13px;}
#top #header .mega_menu_title a {font-size: 15px !important;}
.avia_mega_div .avia-bullet {margin-top: 10px;}
A fix for this would be much appreciated.
Hi there.
I’ve just updated WP and Enfold and have a few issues. The site is http://www.bhutantravelbureau.com
1) I’ve removed ‘You are here’ from the class-breadcrumb.php file however it is still appearing in the Breadcrumb. Is there somewhere else I now need to change this?
2) The mega menu now appears aligned to the left of the corresponding menu item which causes it to extend out of the browser window edge. Is there a way to center the mega menu to the left edge of the navigation bar?
3) When reduced to max-width=767px the logo is distorted extending across contact icons and beneath menu toggle. Is there a fix for this?
4) In the top menu ‘Testimonials’ has no space between it and the corresponding vertical separator. How can I insert this as per the others.
5) Custom CSS I was using for the LayerSlider on the homepage no appears to not be working:
#top .avia-layerslider .ls-wp-container .ls-layer h1{
font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif!important;
font-size: 38px !important;
font-weight: bold !important;
letter-spacing: -2px;
line-height:32px;}
#top .avia-layerslider .ls-wp-container .ls-layer h2{
font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif!important;
font-size: 26px !important;
letter-spacing: -1px;
font-weight: 400 !important;
line-height:24px;}
Any help with resolving these issues would be much appreciated.
Hey D5WDesignGroup!
Please add following code to Quick CSS and adjust as needed
1-
#mobile-advanced, #mobile-advanced a, #mobile-advanced .mega_menu_title { color: red; font-size: 16px; font-weight: bold; }
2-
#mobile-advanced { background-color: red; }
3-
#mobile-advanced { padding: 0; margin-top: 110px; }
Cheers!
Yigit
Hi!
You can add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
h1 { font-size: 100px; }
same goes for other heading elements
Regards,
Yigit
Hey!
Thank you for the update.
Please use this for the portfolio preview title:
.main_color .grid-entry-title {
color: red;
font-size: 20px;
font-weight: bold;
}
Cheers!
Ismael
Hi Yigit,
Im not asking about the Header navigation div.
I am asking how do I change the global H1, H2 etc on the theme. So for example instead of H1 being 30px sized fonts, I want it to be 1000px sized font.
Thank you
I would like to be able to make some styling changes to the mobile dropdown menu if possible.
1. Is it possible to change font size/weight/color/etc.?
2. Is it possible to add a background color or image to the mobile dropdown menu?
3. Is it possible to add a logo to the top of the dropdown menu so that it appears as it does in the mobile header?
Your help is appreciated. Thank you.
div .slideshow_caption h2 { font-size: 24px!important; }
.avia-caption-content { font-size: 16px !important; }
div .slideshow_caption h2, .avia-caption-content { font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; }
this code doesnt seem to be working also?
Is it possible for the Caption title and content to look like this?
http://themeforest.unitedthemes.com/wpversions/brooklyn/extended/
I don’t care about the word rotator. Just the font, size and how it is responsive when i reduced or enlarge browser window. And the box and font (what we do). I am not very good with css.
Thank you
Hey!
Please use following code
.title_container .main-title { font-size: 24px; }
If that does not do it, please post a screenshot and show the heading so we can make sure that we are on the same page :)
Regards,
Yigit