Thanks,
I want to go for different elements for different devices. I added the same two buttons to the home page. The buttons on the foto I would like only to show on desktop and tablet and the buttons below I would like to show only on mobile. The buttons are made with the enfold Button element. Can you give me codes for that? thanks in advance.
Dick
Hey Sadegh,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
.rtl #main {
margin-top: -5px!important;
}}
Best regards,
Yigit
Hi, I build a website with logo and menu at left sidebar, and I have 3 questions.
1. How to reduce the gap / margin around the logo (see picture letter A) ?
2. How to reduce the gap / margin top and bottom the menus (see picture letter B) ?
3. How to reduce the gap between each menus (see picture letter C) ?

Thanks,
Edwin
Hi,
Texts on buttons are a little bit too long to display them side by side on mobile. Would you consider displaying different elements on mobile and on desktop? If you would, please refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Best regards,
Yigit
Hi,
Our website in its Persian (Farsi) version has a little bit problem with the top bar. (LINK)
There is a small white line appeared in both Tablet and Mobile mode:

Regards,
Sadegh
-
This topic was modified 9 years, 5 months ago by
Sadegh.
hi andy
ive changed that now into
#top .jelle.iconbox {
cursor: pointer;
}
to keep the pointer in the .jelle ID , and its oke now.
thanks a lot!
Hi Jarol,
Yes, it’s using fontello, as for changing the icon you may want to follow this thread: https://kriesi.at/support/topic/change-mobile-menu-icon/
Best regards,
Nikko
Hi,
it’s because of this code which you’re using:
#top .iconbox {
cursor: pointer;
}
Remove it and it should work fine.
Best regards,
Andy
Hi,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi
I am going to update the theme again.
what happened last time I did it though was the WPML flags all showed in the top menu bar as well as the dropdown language selector…
this should not have happened as I have the following in the Child functions theme
add_action(‘after_setup_theme’,’avia_remove_main_menu_flags’);
function avia_remove_main_menu_flags(){
remove_filter( ‘wp_nav_menu_items’, ‘avia_append_lang_flags’, 20, 2 );
remove_filter( ‘avf_fallback_menu_items’, ‘avia_append_lang_flags’, 20, 2 );
remove_action( ‘avia_meta_header’, ‘avia_wpml_language_switch’, 10);
}
can you tell me how I can update it without this extra problem occuring?
thanks
Ian
Hey Guenni007,
thanks for your code snippet. But it doesn´t work for me!
I´ve found another snippet that will work:
html body#top #mobile-advanced {
top: 0;
left: auto;
right: -100%;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
transition: right 0.6s;
}
html body#top .show_mobile_menu #mobile-advanced {
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
right: 0;
}
#mobile-advanced {
background: #575b5e;
}
#mobile-advanced a {
color: #fff;
border-color: #777;
text-transform: lowercase;
}
… the problem with this snippet: the menu displays from the right site and not from the top. Do you have an idea how to display the menu from top like in your testsite?
Hi,
Ok great, we’ll keep the thread open in case you should need any further help on the topic.
Best regards,
Rikard
Hi,
this is quite confusing and it would be best to stick to one issue in one thread only. So let’s focus on the missing meta infos when you’re using ALB for your blog posts here. Feel free to open new ticket for other questions.
Please follow this thread: https://kriesi.at/support/topic/using-alb-with-custom-post-type-and-meta-information/#post-580144 and when you’re done use a text element where you us this code:
[the_post_meta]
Then you should be able to display meta info, although you’re using ALB for your blog posts (ALB = Avia Layout Builder). By default meta infos are only available when using WordPress default editor.
Best regards,
Andy
Hi jarol,
You will need to add an id which can be found in section, for example you use this id: custom-id
@media only screen and (max-width:960px) {
#top #custom-id .flex_column_table {
display: block !important;
}
#top #custom-id .flex_column.av_one_third {
display: block !important;
margin-bottom: 32px !important;
width: 100% !important;
}
}
for the meantime you may want to use this code for the specific page:
@media only screen and (max-width:960px) {
.page-id-1160 #av_section_2 .flex_column_table {
display: block;
}
.page-id-1160 #av_section_2 .flex_column.av_one_third {
display: block;
margin-bottom: 32px;
width: 100%;
}
}
Best regards,
Nikko
Hey Rob,
I have added this at the bottom of your Quick CSS:
.home .template-page.av-content-full {
padding: 10px 0 !important;
}
this will reduce the extra padding but you can further reduce it if you change the 10px to 0. As for the last question:
.avia_textblock {
color: #222;
font-family: 'custom-font-here', Arial, sans-serif,
font-size: 16px;
}
you can just play in with the values, as for using custom font you might want to check this thread: https://kriesi.at/support/topic/new-custom-font/
Cheers!
Nikko
Hi Andy
I resolved it by reverting to 3.6, so it must be an issue with 3.8. Unfortunately I can’t show you the problem now because I installed 3.6 and everything is fine there.
It looks like it was the same issue as this https://kriesi.at/support/topic/fullscreen-slider-not-showing-full-screen-but-within-container/
So, maybe you could follow that up.
Thanks for your reply
Hi,
try this code:
#top .main_color .avia-data-table.avia_pricing_minimal
th {
background: #d19a6e !important;
}
Best regards,
Andy
Hi mleite1!
Can you try to add this code on Quick CSS (under Enfold > General Styling):
#avia-menu ul.sub-menu {
top: -50px;
}
.header-scrolled #avia-menu ul.sub-menu {
top: 100%;
}
Just adjust the -50px as you see fit. Hope this helps. :)
Cheers!
Nikko
Hey Kriesi Team,
> Our website has two languages: English and Persian (Farsi) – (as we are using WPML)
> Only in Persian version in Mobile mode, the top bar languages are not aligned in center. (please consider that this issue is happening in all the Persian pages except homepage):

Kind regards,
Sadegh
Hi Elen,
Kindly add this code in Quick CSS (located in General Styling):
@media only screen and (max-width:767px) {
div .product {
width: 100% !important;
float: none !important;
}
.responsive #top.single-product #main .sidebar {
display: block !important;
width: 100%;
}
}
This will fix the gap on the left and will display the sidebar (though it will appear on top instead).
Best regards,
Nikko
Hi,
Please try this as well:
#top .avia-featureimage-slideshow .avia-caption-content {
max-width: 100% !important;
}
Regards,
Rikard
Hey webprodigy,
You will need to enable Custom Css Class to add space on the text element editor. Go to Appearance > Editor and open functions.php and find this code:
// add_theme_support(‘avia_template_builder_custom_css’);
and replace it with
add_theme_support(‘avia_template_builder_custom_css’);
then save it.
Edit the text element editor and at the bottom you should see Custom Css Class add this in it: webp-text and Save
Then Go to Enfold (Theme Options) > General Styling > Custom CSS and add this code:
.webp-text {
padding-top: 30px;
}
if it doesn’t work try this instead:
.webp-text {
padding-top: 30px !important;
}
You can change the value of 30px as you see fit and if you want to add space in the bottom you can change padding-top to padding-bottom. Hope this helps. :)
Best regards,
Nikko
-
This reply was modified 9 years, 5 months ago by
Nikko. Reason: formatting
Hey drewfr,
Thank you for using Enfold.
The magazine can only query posts base on its taxonomy and terms. I’m not sure if it can query recurring events. Please ask the plugin author for the “recurring events” query and then use the “avf_magazine_entries_query” filter to adjust the default query of the magazine element. Examples:
// https://kriesi.at/support/topic/magazine-element-only-shows-40-post/#post-688278
// https://kriesi.at/support/topic/magazine-element-feed-adjustment/#post-649465
Best regards,
Ismael
Hi,
Could you please provide a screenshot of the exact layout of the section? You can try the grid row element, add a background image to the cell then add a text block. Or add two columns on top of each other, add the image on the top or first column and the text block on the second column. Apply a negative top margin to the second column.
Best regards,
Ismael
I write a lot in my pages and the text field of the block editor from the “Advanced Layout Editor” of Enfold is small and unpractical. When the text grow up, if i turn on the fullscreen mode of the text block editor it crashes. The supposed larger field appears cutted and replaced by the background behind the text block editor. I also have installed the distraction free writing “Just Writing” and it’s also incompatible with the block editor from the “Advanced Layout Editor”. The WordPress Desktop App, that could be a great way to write in my pages, is also incompatible with the “Advanced Layout Editor”. If I am using the “Advanced Layout Editor”, everything I write through “Just Writing” or WordPress Desktop App, the text does not appear on the page.
However, if i write in any of these forms in the normal page, so, without using the “Advanced Layout Editor”, it’s ok and the text appears on the page. How i am not using the “Advanced Layout Editor” in my blog posts, i no longer have this problem there. But i need to use the “Advanced Layout Editor” to edit my website pages.
There is a solution to this problem?
Hi
Hoping you can help!
I use the google mobile media element via the layout builder.
It works great on ipad or desktop, but on iphone the map is around 2cm tall.
I’m using a 7:2 ratio.
It there any css or customisation that will allow the map to have different heights for different screens?
Regards
Richard
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top.page-id-156 .iconbox_top {
margin-top: -20px!important;
}
#top.page-id-156 .iconbox_content {
border-top-left-radius: 0px!important;
border-top-right-radius: 0px!important;
}
Best regards,
Vinay