I worked it out myself ;-)
.av-inner-tab-title {
font-size: 20px;
}
.av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image {
width: 200px;
}
hi
I have an issue with woocommerce on a phone screen on this site
I have recently rebuilt the site in Enfold from another theme (as Enfold is much better!!)
this is how it looks in Enfold
https://caravancitysales.com.au/wp/wp-content/uploads/2023/11/IMG_14A25BA7E081-1.jpeg
this is how it looks in the other theme
https://caravancitysales.com.au/wp/wp-content/uploads/2023/11/IMG_B58C2EAA8334-1.jpeg
this theme has the following css
.single-car-mpg { display: none;
}
.price-description-single { display: none;
}
.carousel { align: center;
}
.found-cars-cloned { display: none;
}
.related.products {
display: none;
}
li.product-category.product {
width: 21%!important;
}
li.product-category.product {
text-align: center !important;
}
.product-category h2 {
font-size: 11px;
margin-bottom: 0;
}
.woocommerce .products ul li h5, .woocommerce ul.products li h5 {
min-height: 90px;
}
body.stm-template-car_dealer #stm-boats-header #header .header-inner-content .listing-service-right .listing-menu > li.stm_megamenu > ul{
left: 0 !important;
}
.load-more-btn { display: none !important;;
}
@media (max-width: 768px) {
ul.products.columns-3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.products.columns-3 li.product{
width: 32%;
}
}
.sub-menu {
background: #242628 !important;
border: none !important;
}
.sub-menu > li > a {
color: white !important;
}
much is not related to enfold but there is specific stuff there fro woocommece
can you let me know what the correct css would be
on the page at
I need to adjust the tab width and the font size in the heading
I inspected the page and found this CSS which I have adjusted but its not applying
.av-inner-tab-title {
text-transform: none;
display: block;
line-height: 1.2em;
margin-top: 7px;
margin-bottom: 3px;
font-size: 18px;
text-align: center;
!important;
}
I also want to adjust the width of the tabs so that the title wording is able to be in one line
can you help out here too please?
Hey James,
Please try this CSS instead:
.team-member-description p {
font-size: 16px !important;
}
Best regards,
Rikard
Dear members of the support forum,
I am trying to move the bullet points (markers) of an unordered list down. I would like to move them down just a few pixels, but I don’t know how.
Here is a link to the page:
https://www.maartenontwerp.nl/website-onderhoud/
It’s about the orange markers. I already changed the colour and the size with this code:
li::marker {
color: #ff9001;
font-size: 28px;
}
Your help will be highly appreciated!
Hi gb,
1. The date of the post is placed at the bottom of the post, Can it be placed at the top of the post?
I have added this code in WP Code to move the post date on the top:
function move_postmeta(){
?>
<script>
window.addEventListener('load', function() {
var postMetaInfos = document.querySelector('.single-post .post-meta-infos');
var featuredImage = document.querySelector('.big-preview');
if (postMetaInfos && featuredImage) {
featuredImage.parentNode.insertBefore(postMetaInfos, featuredImage);
}
});
</script>
<?php
}
add_action('wp_footer', 'move_postmeta');
Then to adjust the styling, I added this CSS code in Quick CSS:
#top.single-post #main .big-preview {
margin-top: 0;
}
#top.single-post #main .post-meta-infos {
float: none;
font-size: 1em;
margin-top: 0;
}
2. The post image highlights when the mouse hovers over and is clickable to enlarge. Which is unnecessary, can that be turned off?
Yes, I added this CSS code in Quick CSS:
#top.single-post #main .big-preview a {
pointer-events: none;
}
As for the error, it occured when I inserted the code to modify the image size, since it was already declared in functions-enfold.php, but it’s already fixed.
Best regards,
Nikko
Hello Enfold Team,
I am beating my head against the wall and hope you can help. Ever since I changed the <p> default font-size in “advanced styling” I have not been able to modify the font-size of “team member” descriptions. I have tried to change it via the element’s styling tab, using the custom CSS you all have posted in your documentation and tried adding my own custom CSS class:
/* enfold documentation */
.avia-team-member .team-member-description {
font-size: 16px !important;
}
/* my custom CSS */
.meet-the-team {
font-size: 16px !important;
}
Your guidance is greatly appreciated.
-James
Hi. Customer wants bold 900 weight H1 font for “Enfold Special Heading” -sections. How to do that? The system lets only to change sizes?
Hey ursulamerten,
Thank you for the inquiry.
You can use this css code to adjust the style of the phone number info.
.phone-info div {
line-height: 1em;
font-size: 2em;
color: red;
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.
Best regards,
Ismael
Hi,
dashes not displaying under the “HIGHLIGHTS” and “WHAT’S INCLUDED” headers
Glad to know that you managed to solve most of the issues. To make the dashes display, try to edit the following css code and set the display property to block.
.costa-rica-highlightsec ul.highlight-bullet li:before {
content: ""!important;
width: 15px;
height: 6px;
background-color: #97cfe9;
margin-right: 15px;
margin-bottom: 6px;
font-size: inherit;
display: block;
}
Best regards,
Ismael
Hi jnightingale,
Yes, you can change it, if you edit the Fullwidth Easy Slider, then click on the slide item, to edit it, then go to Styling > Font Sizes > (Caption Title Font Size), select the Mobile Device icon and change the font size.
Here’s a screenshot:

Hope it helps.
Best regards,
Nikko
Hi Kriesi,
Just wanted to add some universal styles to all buttons in our site (sliderbuttons, general content buttons etc.)
I wish to have two looks. A light and a dark.
I’m trying to follow: https://kriesi.at/documentation/enfold/button/#toggle-id-12
But can’t find the “custom CSS class name support” under “layout builder”, and can’t find a topic in here that enlightens me…
Can you help?
Right now i’m designing each botton style like this, which seems not be be a good idea:
.avia-button {
font-size: 0.8em !important;
text-transform: uppercase;
color: #ffffff !important;
padding-left: 1.4em !important;
padding-right: 1.4em !important;
padding-top: 1em !important;
padding-bottom: 1em !important;
font-weight: 400 !important;
letter-spacing: 0.3em;
background-color: #232323 !important;
border: 1px solid #232323 !important;
border-radius: 0px !important;
}
.avia-slideshow-button {
font-size: 0.8em !important;
color: #232323 !important;
padding-left: 1.4em !important;
padding-right: 1.4em !important;
padding-top: 1em !important;
padding-bottom: 1em !important;
font-weight: 400 !important;
letter-spacing: 0.3em;
background-color: #fff !important;
border: 1px solid #fff !important;
border-radius: 0px !important;
}
.avia-slideshow-button:hover {
padding-left: 1.4em !important;
padding-right: 1.4em !important;
padding-top: 1em !important;
padding-bottom: 1em !important;
opacity: 1 !important;
font-size: 0.8em !important;
color: #77855a !important;
font-weight: 400 !important;
letter-spacing: 0.3em;
background-color: #fff !important;
border: 1px solid #fff !important;
border-radius: 0px !important;
}
The thing is, you didn’t mention that you were using the hamburger from the start.
I can see the item but it is set to display none by css code.
to see a first result bring this to quick css and look:
( a little bit more css to see selectors if influnce )
#top .menu-item-cart.menu-item-avia-special {
display: block !important;
}
#top .menu-item-cart.menu-item-avia-special a {
font-size: 24px !important;
}
.av-burger-overlay-active #top .menu-item-cart.menu-item-avia-special a {
color: #FFFFFF !important;
}
#top .menu-item-cart.menu-item-avia-special a:hover {
color: #9d1a18 !important;
}
(click to enlarge:)

_____________________
and don’t forget to replace the “#” by the link of that cart icon
get rid of the class: menu-item in that snippet:
function add_cart_icon_to_main_menu( $items, $args ){
if ($args->theme_location == 'avia'){
$cartLink = '<li class="menu-item-cart menu-item-avia-special" role="menuitem"><a aria-label="Cart" href="#" rel="nofollow" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" alt="Cart" ><span class="avia_hidden_link_text avia-menu-text">Cart</span></a></li>';
$items = $items . $cartLink;
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'add_cart_icon_to_main_menu', 9999, 2 );
removed this junk code but didn’t help
[av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-lok43reo' sc_version='1.0' admin_preview_bg='']
Hi,
Thank you for the link to your site, I recommend changing this css:
@media only screen and (max-width: 767px) {
.av-elegant-toggle .taglist a {
line-height: 4.0em;
font-size: 0.9em;
padding: 12px 24px;
}
}
to this:
@media only screen and (max-width: 767px) {
.av-elegant-toggle .taglist a {
line-height: 4.0em;
font-size: 0.9em;
padding: 12px 20px;
display: inline-block;
}
}
This is the expected results:

Best regards,
Mike
Hi limedrop,
Unfortunately, we don’t have styling options for the Mobile Menu, however, we can assist you with the CSS code necessary to have that style, you can try to add this CSS code in Enfold > General Styling > Quick CSS, to set the background color, color, font-size, etc.
#top #wrap_all #av-burger-menu-ul li a {
background-color: blue;
}
#top #wrap_all #av-burger-menu-ul li a .avia-menu-text {
color: white;
font-size: 18px;
}
Hope it helps.
Best regards,
Nikko
Hey ti2media,
Thank you for the inquiry.
Please add this css code to adjust the size of the icon and move it beside the burger menu.
#top .av-custom-menu-button .av_font_icon {
font-size: 30px;
color: red;
}
#top .av-custom-menu-button {
position: absolute;
right: 100px;
top: 14px;
z-index: 100;
height: 62px;
width: 50px;
border-right: 2px solid;
line-height: 62px;
}
After that, you have to remove this css code to get rid of the box beside the cart icon.
.av-custom-menu-button a {
padding: 10px 10px;
background: red;
position: relative !important;
left: 0 !important;
}
Best regards,
Ismael
I want to style the mobile menu (background, font size etc.:
“Advanced Color And Styling Options
You can edit more and advanced color and styling options for the overlay/slideout menu items in Advanced Styling”
However, this option is not available in the Advanced styling meny…..
Hi Rikard,
the formatting of the main menu is not taken over, also the formatting for buttons (frame width 1), and also the font size <p> is not correct. Also the size of the H tags does not fit from my point of view.
Thank you, that works! One other question – I have tried to increase font size is Typographie but it doesn’t work. Can you help me there too please? It’s for the body of blog posts and pages.
I’d also like to know how to automatically include the title and feature image in a page?
Thanks again
Hey Illingco,
Thank you for opening a different thread.
How can I also control the eyeglass icon color?
Have you tried changing the color values in the css modification from the previous thread?
.header_color .widget_search input[type=submit]:hover {
background-color: #dc291d;
color: #232323;
}
If you want to adjust the initial color, use this:
#top #header.header_color .widget #searchform #searchsubmit {
font-size: 16px;
color: blue;
}
To adjust the border width of the search bar, add this css code.
#top #header.header_color .widget #s {
border-width: 3px !important;
}
Best regards,
Ismael
Hey Yaphoon,
1: to change the font size of the special heading, please use the setting in the element

2: for the table font color, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even), #top .main_color .avia-data-table.avia_pricing_minimal td {
color: #000;
}
3: to change the font colors, please use the option in the element:

4: to change the font size in the icon list element, please use the element options:

5+6: to add space above the special heading “Contact Us For More Information” and “You Might Also Like” try adding some “top padding” in the element:

Best regards,
Mike
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top .main_color #commentform input[type='text'],
#top .main_color #commentform textarea {
color: #000;
font-size: .8em;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi Mike,
Thanks for your support. That works great for the fixed terms.
Ho can I apply it (font-size and color) also for the input text?
Kind Regards
Hi there,
I want to have adjust some in this page
1. I want to make the title font size smaller, where to set
2. Specification chart, I want make all the words in black color
3. Key feature, I want to make all in white color, including flip and make 2 line bigger space
4. Application, I want to make the list words font bigger
5. Make space bigger before “Contact Us For More Information”
6. Make space bigger before “You might Also like”
https://img.savvyify.com/image/9gk58
I want show the element from portfolio. But this time seems wrong, pls help.
Wang
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#commentform ::-webkit-input-placeholder {
color: #000;
font-size: .8em;
}
#commentform :-moz-placeholder {
color: #000;
font-size: .8em;
}
#commentform ::-moz-placeholder {
color: #000;
font-size: .8em;
}
#commentform :-ms-input-placeholder {
color: #000;
font-size: .8em;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hey JantienM,
Please try using this code instead:
.iconbox_icon:before {
font-size: 30px;
}
Best regards,
Rikard
Hi Nikko
Great help, that works!
Just need the class to adjust font-size and color terms.
Thanks